canvas 是 html5 标准中提供的?个标签 顾名思义是定义在浏览器上的画布,通过其强大的绘图接口,我们可以实现各种各样的图形, 炫酷的动画 ,甚至可以利用他开发?游戏,包括市面上很流行的数据可视化框架底层都用到了Canvas 。
● 是?个HTML元素, 我们可以将它简单理解为?个画板, 通过Canvas提供的绘制api我们 就可以绘制出各种图形。
getContext('2d')
getContext('webgl')
● 坐标系
● 绘制: moveTo, lineTo ,stroke
● 设置样式: lineWidth ,strokeStyle
● 路径: beginPath,closePath
arcTo(x1, y1, x2, y2, radius);
arc(x, y, radius, startAngle, endAngle, anticlockwise);
二阶:quadraticCurveTo(cpx, cpy, x, y);
三阶:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
线条样式:
● lineWidth
● lineCap
● setLineDash
渐变
线性渐变 ctx.createLinearGradient(x0, y0, x1, y1);
径向渐变 ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
纹理样式 ctx.createPattern(image, repetition);
绘制方式:
● 描边
● 填充 fillText()
绘制样式:
● font 、textAlign 、direction 、textBaseline
● 阴影:shadowOffsetX 和 shadowOffsetY 、shadowBlur 、shadowColor
drawImage用法:
drawImage(image, dx, dy);
drawImage(image, dx, dy, dWidth, dHeight);
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
● 语法:
○ transform(a, b, c, d, e, f);
Canvas 提供了 26 种图片混排模式
重点: destination-out
xor:
语法: ctx.globalCompositeOperation = type;
3、裁剪
clip()
技术点:离屏渲染
将?个canvas对象绘制到另?个canvas对象上( 离开用户可视范围内进行渲染)
技术点: 图像合成
利用图像合成让绘制的内容与原矩形重合部分清空
技术点:单位像素处理
这里我们主要借用 getImageData 函数 ,他返回每个像素的 RGBA 值 。借助图像处理公式, 操作像素进 行相应的 、数学运算即可。
getImageData()
putImageData()
Canvas的应用非常广泛:
首先是可视化数据的应用, 比如说:百度的ECharts 、阿里的G2等图表可视化插件; 其次是游戏的应用, Canvas游戏在流畅度和跨平台方面都表现很好;还有图形编辑器的应用等等。