文字
- strokeText(text, x, y)
- fillText(text. x, y)
- font
- textAlign
- textBaseline
图片
- 插入图片 drawImage(img, x, y)
- 插入图片设置大小 drawImage(img, x, y, width, height)
- 插入图片的一部分到画布 drawIamge(img, sx, sy, swidth, sheight, x, y, width, height)
canvas 阴影
- shadowColor
- shadowBlur
- shadowOffsetX
- shadowOffsetY
渐变
- 线性渐变 createLinearGradient(x1, y1, x2, y2)
addColorStop()
Canvas基础
- 划线
- 矩形
- 填充
- 描边
- 文字
- 弧
Canvas进阶
阴影
渐变
线性渐变
径向渐变
- createRadiaGradient(x1, y1, r1, x2, y2, r2)
- addColorStop()
把背景图片作为填充
- createPattern(imgDom, repeate)
- 第二个参数 repeate/ repeat-x / repeat-y / no-repeat
变换
缩放
- sacle(x, y)
位移
- translate(x, y)
旋转
- rotate(angle)
环境的保存和恢复
- save()
- restore()
设置透明
- globalAlpha = number 设置不透明度
- 全局设置是对整个画布（绘图环境） 进行设置
限定绘图区域
- clip()
输出base64编码
- canvas.toDataURL(type, encoder)
- type为mime类型 image/jpeg image/gif image/png image/webp
画布渲染画布
把一个画布以图片的形式用 drawImage() 插入到另一个画布
这是一种canvas的优化手段
设置线条
- lineCap 属性 设置线条两端的形状 butt/round/square
- lineJoin 属性 设置线条夹角 miter/bevel/round
- miterLimit 属性 设置夹角斜角的最大长度 一般默认 10
