首页 > 技术文章 > Html5 Canvas笔记(3)-Canvas状态

alexywt 2015-08-16 23:35 原文

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();

推荐阅读