Html5 Canvas笔记(3)-Canvas状态

Canvas状态是即时存储的Canvas上下文数据，我们可以随时进行存储。关于Canvas状态，有必要了解以下四大相关内容：

Canvas的绘图模式

Canvas的绘图模式是即时绘图模式，该模式下会每一帧完全重绘画布上的位图，如果Canvas不能自己保存及恢复状态数据，那么程序员就得自己维护所有显示对象每一帧的状态数据！这应该就是Canvas状态的必要性及由来。

Canvas状态保存的数据

变换矩阵信息：

2d变形、3d变形所使用到的函数，如rotate()、setTransform()等

当前剪贴区域：

画布属性当前值：

globalAlpha、globalCompositeOperation、strokeStyle、textAlign、textBaseline、lineCap、lineJoin、lineWidth、miterLimit、fillStyle、font、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY

不在Canvas状态内的数据

当前绘制路径和 当前位图不在Canvas状态控制范围

也就是说，在我们绘制路径或者图形时，可以首先保存下Canvas状态；在绘制路径及图形完成后，再加载一次Canvas状态数据，这样可以避免全部重绘整个画布图形内容。

Canvas状态数据的保存与恢复

Canvas状态的保存

1 context.save();

Canvas状态的恢复

1 context.restore();

转载于:https://www.cnblogs.com/alexywt/p/4735242.html