无标题文章

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

白鹭时代