應用到畫布上面的效果是可以累積的，因而就可以利用幾個簡單的函數來“組合”出效果來。例如，在向屏幕上繪制之前，可能會有一艘飛船需要旋轉、變換 和縮放。因為所有效果都對畫布起作用，所以這些效果會應用到將被繪制在屏幕上的所有對象，而不僅僅是某一幅圖像或某一個形狀（比如一艘飛船）。
其中，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();