canvas（二）

渐变

线性渐变

var grd = cxt.createLinearGradien(x, y, x1, y1);
grd.addColorStop(位置, color)

径向渐变

• 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