画布处理

重叠图像处理

• ctx.globalcompositeOperation：设置重叠图像处理

destination-out 可以用来做刮刮乐

像素读写

• getImageData(x, y, w, h)：将画布读取成一个 ImageData 对象，读取始点位于 (x, y)，大小由 width 和 height 指定
• putImageData()：将 ImageData 对象写入画布

ctx.putImageData(imagedata, dx, dy)
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

• createImageData(w, h)：生成一个空的ImageData对象，所有像素都是透明的黑色

ImageData对象

• ImageData.data：一个一维数组。该数组的值，依次是每个像素的红、绿、蓝、alpha 通道值（每个值的范围是 0～255），因此该数组的长度等于图像的像素宽度 x 图像的像素高度 x 4。这个数组不仅可读，而且可写，因此通过操作这个数组，就可以达到操作图像的目的
• ImageData.width：浮点数，表示 ImageData 的像素宽度
• ImageData.height：浮点数，表示 ImageData 的像素高度

矩阵变换

1. 矩阵变换（具体矩阵公式可以参照 图形学 - 基础 - 矩阵）

setTransform(a, b, c, d, e, f)

变换矩阵的描述：$\left(\begin{array}{ccc}a& c& e\\ b& d& f\\ 0& 0& 1\end{array}\right)$

2. 对画布左上角进行平移变换

translate(x轴方向的距离, y轴方向的距离)

3. 对画布进行缩放变换

scale(x轴缩放倍数， y轴缩放倍数)

4. 对画布进行旋转变换

rotate(顺时针旋转的弧度)

绘制状态保存和恢复

绘制状态：

• 当前的变换矩阵
• 当前的剪切区域（clip）
• 当前的虚线列表
• 以下属性的当前值：strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、lineDashOffset、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、textBaseline、direction、imageSmoothingEnabled

使用 save() 方法保存当前状态（只是保存，不会将状态去除），使用 restore() 方法恢复

可以理解成 save() 后的绘制状态可以随心所欲，只要 restore() 就不会影响之前的绘制状态