菜鸟教程 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() 将当前已绘制的形状作为蒙版进行裁切

动画

---

每一帧的步骤：

1. 清空canvas clearRect( 0, 0, width, height )
2. 保存canvas状态 save()
3. 绘制动画图形
4. 恢复canvas状态 restore()