理解Canvas的save()和restore()方法

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.οnlοad=function(){
var ctx=document.getElementByIdx_x_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>

转载于:https://www.cnblogs.com/Ironman725/p/11110956.html

理解Canvas的save()和restore()方法相关推荐

Canvas的save和restore方法
2019独角兽企业重金招聘Python工程师标准>>> Canvas里的两个重要方法,一直很疑惑. save和restore方法是成对出现的,但是restore必然对应一个save方 ...
canvas 的save()和restore()方法
应用到画布上面的效果是可以累积的,因而就可以利用几个简单的函数来"组合"出效果来.例如,在向屏幕上绘制之前,可能会有一艘飞船需要旋转.变换和缩放.因为所有效果都对画布起作用,所以 ...
canvas中save和restore的理解和使用
canvas中save和restore的理解和使用理解save和restore不一定总是成对出现的太阳系理解save和restore不一定总是成对出现的每个 canvas 的 context ...
Canvas的save和restore
在创建新的控件或修改现有的控件时,我们都会涉及到重写控件或View的onDraw方法. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方法里,我们经常会 ...
canvas理解：一看就懂的save和restore
一看就懂的save和restore 对于save()和restore()方法,我一开始有一个错误的理解,以为每一步都save()之后restore()就等同于command + z(或者ctrl + ...
Android画布的保存,Android canvas用法介绍之save()和restore()
一. 首先讲一下canvas的save 和 restore功能. 这是canvas很有魅力的一个部分. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方 ...
canvas像素操作、save与restore、合成与变形
一.canvas像素操作 (1)获取图像像素 (2)写入像素数据 (3)创建像素数据 (4)小案例,将canvasA画布的图像复制到canvasB中二.canvas的save与restore 三.c ...
Android 中Canvas的save(),saveLayer()和restore()解析
1.save()方法 : 用来保存Canvas的状态,save()方法之后的代码,可以调用Canvas的平移.放缩.旋转.裁剪等操作! 2.restore()方法: 用来恢复Canvas之前保存的状态 ...
php画钟,canvas如何绘制钟表的方法_html5教程技巧
这篇文章主要介绍了HTML5中的canvas如何绘制钟表的方法的相关资料,小编觉得HTML真的是越来越强大的,现在分享给大家,也给大家做个参考.对HTML的小伙伴们可以一起跟随小编过来看看吧本文介绍 ...

理解Canvas的save()和restore()方法

理解Canvas的save()和restore()方法相关推荐

最新文章

热门文章