請(qǐng)問最后一個(gè)例子里面的兩對(duì)save()restore() 分別起了什么樣的效果？
我只把對(duì)每一幀的渲染函數(shù)貼出來
function render(ctx){
??????? ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
??????? ctx.save();?????????????????????????? // 第一個(gè)save()
??????? ctx.fillStyle = "#333";
??????? ctx.fillRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
??????? ctx.save();????????????????????????? // 第二個(gè)save()，后面幾行代碼涉及圖形變換，需要保存當(dāng)前繪制狀態(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)整順序后成功，我的理解是因?yàn)橐獙⒓糨嬓Ч饔糜诤竺娴睦L制。這樣理解對(duì)不對(duì)？ */
??????? 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();??????????????????? /* 這個(gè)restore() 對(duì)應(yīng)的是第一個(gè)save()吧。之前的例子中，沒有動(dòng)畫，好像不寫這一對(duì)也不會(huì)出錯(cuò)。但這個(gè)例子里注釋掉這一對(duì)，畫面就變成靜止的了。不知道是什么原因？ */
??? }
2015-09-01
save和restore是用于繪制環(huán)境的保存與還原，如果你不寫這一對(duì)方法，你前面進(jìn)行的操作（全屏先涂#333）就不會(huì)被還原，而是在原來的繪制環(huán)境（簡單理解就是原圖形）上進(jìn)行新的操作，這樣你第二次畫的內(nèi)容都是在原圖上畫的。
clip與你第一次restore的順序沒有關(guān)系，你可以把每一幀的繪畫放在一個(gè)save和restore之間，最重要的是你需要在clip前調(diào)用beginpath方法，如果不調(diào)用beginpath你每次的剪切圓不會(huì)消失而是一直保持在畫面上。
調(diào)用一個(gè)beginpath,closepath就可以啦。