Html5 Canvas笔记(3)-Canvas状态

p{
font-size: 15px; text-indent: 2em;
}
.alexrootdiv>div{
background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0;
}
.alexrootdiv>div>p:first-of-type,.alextitlep{
font-size: 18px; font-weight: bold; color: red;
}
.alexrootdiv span{
color:blue;font-weight:bold;
}
.alexrootdiv table{
margin-top:10px;border-collapse:collapse;border:1px solid #aaa;width:100%;
}
.alexrootdiv table th{
vertical-align:baseline;padding:5px 15px 5px 6px;background-color:#d5d5d5;border:1px solid #aaa;text-align:left;
}
.alexrootdiv table td{
vertical-align:text-top;padding:6px 15px 6px 6px;background-color:#efefef;border:1px solid #aaa;
}
.attentationp{
font-size: 15px; text-indent: 2em; background: #ee0; color: red; font-weight: bold;
}
-->

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状态的保存

 context.save();

Canvas状态的恢复

 context.restore();