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

HTML5 canvas save和restore方法讲解

时间:2015-03-02 12:50:02      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

源:http://www.silverlightchina.net/html/HTML_5/study/2012/0326/14828.html

save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来 保存和恢复 canvas 状态的,都没有参数。 Canvas 状态是以堆(stack)的方式保存的,每一次调用 save 方法,当前的状态就会被推入堆中保存起来。这种状态包括:当前应用的变形(即移动,旋转和缩放,见下): strokeStyle, fillStyle, globalAlpha, lineWidth

  

  save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的,都没有参数。

  Canvas 状态是以堆(stack)的方式保存的,每一次调用 save 方法,当前的状态就会被推入堆中保存起来。这种状态包括:当前应用的变形(即移动,旋转和缩放,见下):

  strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

  你可以调用任意多次 save 方法。每一次调用 restore 方法,上一个保存的状态就从堆中弹出,所有设定都恢复。

  举个save 和 restore 的应用例子吧。

技术分享

  我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的。

  第一步是用默认设置画一个大四方形,然后保存一下状态。改变填充颜色画第二个小一点的白色四方形,然后再保存一下状态。再次改变填充颜色绘制更 小一点的蓝色四方形。然后我们调用了restore方法将设置回到前一个save状态下的fillStyle="white",即在不设定颜色值的情况下 再绘制最小的矩形时其添充色为白色。

  一旦我们调用 restore,状态堆中最后的状态会弹出,并恢复所有设置。如果不是之前用 save 保存了状态,那么我们就需要手动改变设置来回到前一个状态,这个对于两三个属性的时候还是适用的,一旦多了,我们的代码将会猛涨。简而言之restore 方法就可以理解成将其对应的当前save状态下的设置全部恢复为前一个状态

  代码:

<script type="text/javascript">
window.onload=function(){
 var ctx=document.getElementByIdx_x("canvas").getContext("2d");
 ctx.fillRect(10,10,150,150);

 ctx.save();
 ctx.fillStyle="white";
 ctx.fillRect(30,30,110,110);

 ctx.save();
 ctx.fillStyle="blue";
 ctx.fillRect(50,50,70,70);
 ctx.restore();//回到上一个状态,即 ctx.fillStyle="white";

 ctx.save();
 ctx.fillRect(70,70,30,30);//所以此处没有设定fillStyle的时候颜色为white,注意哦!如果在白色矩形后面也restore一下刚此处的fillStyle就为黑色了
 ctx.restore();
}
</script>

HTML5 canvas save和restore方法讲解

标签:

原文地址:http://www.cnblogs.com/wkhuahuo/p/4308354.html

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