HTML5 canvas保存与撤销接口
应用到画布上面的效果是可以累积的，因而就可以利用几个简单的函数来“组合”出效果来。例如，在向屏幕上绘制之前，可能会有一艘飞船需要旋转、变换 和缩放。因为所有效果都对画布起作用，所以这些效果会应用到将被绘制在屏幕上的所有对象，而不仅仅是某一幅图像或某一个形状（比如一艘飞船）。
其中，save和restore函数为应用这些累积的效果提供了一种简单的机制，可以将应用了这些效果的图像或图形绘制到画布上，然后“撤销”这些 改变。后台的操作是什么呢？save函数把当前的绘制状态推进栈里，而restore函数则把最后一个状态弹出栈。还拿前面提到的飞船为例，需要执行下列 操作：
调用save函数（保存当前的绘制状态）
旋转、变换和缩放上下文
绘制飞船
调用restore函数，移除自上一次调用save方法以来所添加的任何效果，也就是撤销之前的变化
例子：
|
1
2
3
4
5
6
7
8
9
10
11 |
function draw(){ currentTime+=secondsBetweenFrames; sineWave=(Math.sin(currentTime)+1)/2; context.clearRect(0,0,canvas.width,canvas.height);//context的clearRect方法 context.save();//context的save()方法 context2D.translate(halfCanvasWidth - halfImageDemension, halfCanvasHeight - halfImageDemension);//context的translate()方法 currentFunction(); context.drawImage(image,0,0);//context的drawImage()方法 context.restore();//context的restore()方法} |
在这里，我们就是要组合起来使用这两个方法。首先，在把任何效果应用到画布之前，先保存绘制状态。
context2D.save();
保存了绘制状态之后，就该应用目标效果了。为此，首先调用translate函数，从而将随后要绘制的图像在画布上居中。
context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);
接下来，调用由变量currentFunction引用的函数。正是这些被引用的函数，是让图像发生alpha（透明度）变化以及缩放、旋转和切变的关键。这些函数我们稍后再介绍。
currentFunction();
为图像应用完效果之后，就可以把它绘制到画布上面了。所以，接下来就是调用drawImage来绘图。
context2D.drawImage(image, 0, 0);
最后，再调用restore函数，把自调用save函数以来应用的所有效果从画布上移除。
context2D.restore();
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
