菜鸟教程 https://www.runoob.com/tags/ref-canvas.html
获取canvas
const canvas = document.querySelector('canvas')
获取context
const ctx = document.getContext('2d')
矩形
无样式绘制 rect(x, y, width, height)
填充 fillRect(x, y, width, height)
描边 strokeRect(x, y, width, height)
清除 clearRect(x, y, width, height)
路径
新建路径 beginPath()
闭合路径 closePath()
填充 fill()
描边 stroke()
移动笔触 moveTo(x, y)
线
到下一个点 lineTo(x, y)
圆弧
圆 arc(x, y, radius, startAngle, endAngle, 反向)
圆弧 arc(x1, y1, x2, y2, radius)
贝塞尔曲线
二次贝塞尔
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
三次贝塞尔
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
样式
填充色 fillStyle = 'red'
描边色 strokeStyle = 'yellow'
全局透明 globalAlpha = 0.0 - 1.0
线
lineWidth = value
lineCap = type butt*, round, square
lineJoin = type round, bevel, miter*
miterLimit = value
getLineDash()
setLineDash(segments) [4, 2]
渐变
createLinearGradient(x1, y1, x2, y2) 渐变的起点和终点
createRadialGradient(x1, y1, r1, x2, y2, r2) 起点/终点0-1+半径
addColorStop(position, color) 方法上色
示例
const lineargradient = ctx.createLinearGradient(0,0,150,150) //两个点
lineargradient.addColorStop(0,'white')
lineargradient.addColorStop(1,'black')
ctx.fillStyle = lineargradient //最终上色
图案样式 Patterns
创建图案 createPattern(image, type)
注意：与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对的。
示例
const img = new Image()
img.src = 'https://i.postimg.cc/NfPGXqsw/Frame-3x.png'
img.onload = function (){
ctx.save()
ctx.translate(width/2, height/2)
const ptrn = ctx.createPattern(img, 'repeat')
ctx.fillStyle = ptrn
ctx.fillRect(0,0,350,350)
ctx.restore()
}
投影
颜色 shadowColor = color
模糊 shadowBlur = num
方向 shadowOffsetY = num shadowOffsetX = num
文本
填充文本 fillText(string, x, y [, maxWidth] )
描边文本 strokeText(string, x, y [, maxWidth])
大小和字体 font = value 10px sans-serif
对齐 textAlign = value start, end, left, right, center
基线 textBaseline = value top, hanging, middle, alphabetic, ideographic, bottom
预测量文本宽度 measureText(string)
console.log( ctx.measureText('hello').width ) //36
图像
绘制 drawImage(image, x, y)
image为元素对象，可以是图片元素、视频元素、canvas元素
定义宽高 drawImage(image, x, y, width, height)
定义切片 drawImage(image, x, y, width, height, dx, dy, dwidth, dheight)
保存和恢复
保存 ctx.save()
恢复 ctx.restore()
保存或恢复canvas当前应用的样式和变形还有裁剪路径
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
变换
位移 translate(x, y)
旋转 rotate(angle)
缩放 scale(x, y)
变形 transform(m11, m12, m21, m22, dx, dy)
m11：水平方向的缩放
m12：水平方向的倾斜偏移
m21：竖直方向的倾斜偏移
m22：竖直方向的缩放
dx：水平方向的移动
dy：竖直方向的移动
裁剪
ctx.clip() 将当前已绘制的形状作为蒙版进行裁切
动画
每一帧的步骤：
- 清空canvas
clearRect( 0, 0, width, height ) - 保存canvas状态
save() - 绘制动画图形
- 恢复canvas状态
restore()