码迷,mamicode.com
首页 > Web开发 > 详细

Html5 Canvas笔记(3)-Canvas状态

时间:2015-08-17 00:43:01      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:

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

Html5 Canvas笔记(3)-Canvas状态

标签:

原文地址:http://www.cnblogs.com/alexywt/p/4735242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!