canvas高级

阴影

• shadowColor 属性
• shadowBlur 属性
• shadowOffsetX 属性
• shadowOffsetY 属性

渐变

线性渐变

• createLinearGradient(x0, y0, x1, y1);
• grd.addColorStop(number, color)

径向渐变

• createRadialGradient(x0,y0,r0, x1, y1, r1)
• grd,addColorStop(number,color)

背景填充

• createPattern(img, repeate)

变换 - 缩放

• sacle(w, h)

变换-位移

• translate(w, h)

变化-旋转

• rotate(deg)

环境的保存和释放

• save()
• restore()

设置不透明度

• globalAlpha 属性 设置不透明度 对整体（绘图环境）进行设置 0~1小数

裁剪画布（绘图环境）

• clip() 沿着路径包围的部分裁切。 对绘图环境进行裁切

画布保存为Base63编码

• canvas.toDataURL(type, 压缩比) 类型是图片的mime类型

画布渲染画布

• drawIamge(canvas, 0, 0)
• 图像在隐藏的canvas 上绘制
• 绘制完成后 把隐藏canvas 渲染到 显示的canvas上

线条样式

• lineCap 属性 两端样式 butt/round/square
• lineJoin 属性 两线相交样式 miter/round/bevel
• miterLimit 属性 设置尖角的长度

贝塞尔曲线(了解)

使用切线画弧(了解)

• arcTo(x1, y1, x2, y2, r)

判断是否在路径上

• isPositionPath(x, y)

canvas库 -- Konva

常见的canvas库

• Konva
• echarts
• 白鹭时代

转载于:https://my.oschina.net/u/3502339/blog/1069071