應(yīng)用到畫布上面的效果是可以累積的柴墩，因而就可以利用幾個簡單的函數(shù)來“組合”出效果來茴扁。例如最爬，在向屏幕上繪制之前涉馁，可能會有一艘飛船需要旋轉(zhuǎn)、變換 和縮放爱致。因為所有效果都對畫布起作用烤送，所以這些效果會應(yīng)用到將被繪制在屏幕上的所有對象，而不僅僅是某一幅圖像或某一個形狀（比如一艘飛船）糠悯。
其中帮坚，save和restore函數(shù)為應(yīng)用這些累積的效果提供了一種簡單的機制妻往，可以將應(yīng)用了這些效果的圖像或圖形繪制到畫布上，然后“撤銷”這些 改變试和。后臺的操作是什么呢讯泣？save函數(shù)把當前的繪制狀態(tài)推進棧里，而restore函數(shù)則把最后一個狀態(tài)彈出棧阅悍。還拿前面提到的飛船為例好渠，需要執(zhí)行下列 操作：
調(diào)用save函數(shù)（保存當前的繪制狀態(tài)）
旋轉(zhuǎn)、變換和縮放上下文
繪制飛船
調(diào)用restore函數(shù)节视，移除自上一次調(diào)用save方法以來所添加的任何效果拳锚，也就是撤銷之前的變化
例子：
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()方法
}
在這里，我們就是要組合起來使用這兩個方法肴茄。首先晌畅，在把任何效果應(yīng)用到畫布之前，先保存繪制狀態(tài)寡痰。
context2D.save();
保存了繪制狀態(tài)之后抗楔，就該應(yīng)用目標效果了。為此拦坠，首先調(diào)用translate函數(shù)连躏，從而將隨后要繪制的圖像在畫布上居中。
context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - >HALFIMAGEDIMENSION);
接下來贞滨，調(diào)用由變量currentFunction引用的函數(shù)入热。正是這些被引用的函數(shù)，是讓圖像發(fā)生alpha（透明度）變化以及縮放晓铆、旋轉(zhuǎn)和切變的關(guān)鍵勺良。這些函數(shù)我們稍后再介紹。
currentFunction();
為圖像應(yīng)用完效果之后骄噪，就可以把它繪制到畫布上面了尚困。所以，接下來就是調(diào)用drawImage來繪圖链蕊。
context2D.drawImage(image, 0, 0);
最后事甜，再調(diào)用restore函數(shù)，把自調(diào)用save函數(shù)以來應(yīng)用的所有效果從畫布上移除滔韵。
context2D.restore();
[鏈接] (http://blog.csdn.net/qq_15037231/article/details/51055868)
概括來說逻谦，用這個組合，可以對canvas頁面中的某些元素進行修改陪蜻，而不對其他的元素產(chǎn)生影響邦马。
