canvas简单入门(3)

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:默认，向线条的每个末端添加平直的边缘。
  • oround 、、
  • square： 向线条的每个末端添加正方形线帽。

• lineJoin 属性 设置线条夹角

  • miter: 默认.创建尖角
  • bevel:创建斜角.
  • round: 创建圆角.

• miterLimit 属性 设置夹角斜角的最大长度 一般默认 10