canvas（二）
2017-06-05 本文已影响0人
璃_b11f
渐变
线性渐变
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
