請問最后一個例子里面的兩對save()restore() 分別起了什么樣的效果？
我只把對每一幀的渲染函數(shù)貼出來
function render(ctx){
??????? ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
??????? ctx.save();?????????????????????????? // 第一個save()
??????? ctx.fillStyle = "#333";
??????? ctx.fillRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
??????? ctx.save();????????????????????????? // 第二個save()，后面幾行代碼涉及圖形變換，需要保存當前繪制狀態(tài)
??????? ctx.translate( 400, 400 );
??????? ctx.scale( searchLight.R, searchLight.R );
??????? starPath(ctx);
??????? ctx.fillStyle = "#FFF";
??????? ctx.fill();
??????? ctx.restore();???????????????????? /* 繪制狀態(tài)返回到圖形變換之前。第一次我把clip()寫在restore()的前面，沒有出現(xiàn)剪輯效果。調(diào)整順序后成功，我的理解是因為要將剪輯效果作用于后面的繪制。這樣理解對不對？ */
??????? ctx.clip();
??????? ctx.fillStyle = "#058";
??????? ctx.font = " bold 80px Arial ";
??????? ctx.textAlign = "center";
??????? ctx.textBaseline = "middle";
??????? ctx.fillText( "CANVAS", ctx.canvas.width/2, ctx.canvas.height /4 );
??????? ctx.fillText( "CANVAS", ctx.canvas.width/2, ctx.canvas.height* 5/12 );
??????? ctx.fillText( "CANVAS", ctx.canvas.width/2, ctx.canvas.height* 7/12 );
??????? ctx.fillText( "CANVAS", ctx.canvas.width/2, ctx.canvas.height* 3/4 );
??????? ctx.restore();??????????????????? /* 這個restore() 對應的是第一個save()吧。之前的例子中，沒有動畫，好像不寫這一對也不會出錯。但這個例子里注釋掉這一對，畫面就變成靜止的了。不知道是什么原因？ */
??? }
2015-09-01
save和restore是用于繪制環(huán)境的保存與還原，如果你不寫這一對方法，你前面進行的操作（全屏先涂#333）就不會被還原，而是在原來的繪制環(huán)境（簡單理解就是原圖形）上進行新的操作，這樣你第二次畫的內(nèi)容都是在原圖上畫的。
clip與你第一次restore的順序沒有關系，你可以把每一幀的繪畫放在一個save和restore之間，最重要的是你需要在clip前調(diào)用beginpath方法，如果不調(diào)用beginpath你每次的剪切圓不會消失而是一直保持在畫面上。
調(diào)用一個beginpath,closepath就可以啦。