HTML5CANVAS：绘图状态和状态栈

context.save();     // 将一个状态压入状态栈中
 
context.restore();  // 将最前面的状态出栈，并设置到2d上下文中 

　　对于一个状态栈，你可以压入多个状态，然后在将它们依次弹出。来看下面的例子：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle  ="#66ff66";
context.strokeStyle="#990000";
context.lineWidth  = 5;
context.fillRect  (5, 5, 50, 50);
context.strokeRect(5, 5, 50, 50);
context.save();
context.fillStyle = "#6666ff";
context.fillRect  (65, 5, 50, 50);
context.strokeRect(65, 5, 50, 50);
context.save();
context.strokeStyle = "#000099";
context.fillRect  (125, 5, 50, 50);
context.strokeRect(125, 5, 50, 50);
context.restore();
context.fillRect  (185, 5, 50, 50);
context.strokeRect(185, 5, 50, 50);
context.restore();
context.fillRect  (245, 5, 50, 50);
context.strokeRect(245, 5, 50, 50);   
 

　　上面的代码得到的结果如下：

　　fillStyle

　　font

　　globalAlpha

　　globalCompositionOperation

　　lineCap

　　lineJoin

　　lineWidth

　　miterLimit

　　shadowBlur

　　shadowColor

　　shadowOffsetX

　　shadowOffsetY

　　strokeStyle

　　textAlign

　　textBaseline

　　clipping区域

　　转换矩阵

　　上面的列表并不是完整的列表。还有更多的属性属于2D上下文状态的一部分。

以上就是HTML5 CANVAS：绘图状态和状态栈的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

查看更多关于HTML5CANVAS：绘图状态和状态栈的详细内容...