HTML5 CANVAS隱藏一個bug？或代碼缺陷？

Question

我面臨着畫布的繪製問題。

畫布被保存到數據：圖像一次。
它被重繪。
此時出現兩個問題。

1. 陰影將應用於未繪製陰影的對象。
2. 如果保存並重繪重繪，陰影將變深。

---

<canvas id="SAMPLE" width="960" height="480"></canvas> 
<script type="text/javascript" src="./jquery.js"></script> 
<script> 
    var canvas = $("#SAMPLE"), 
     ctx = canvas[0].getContext("2d"); 

    // first object (no shadow) 
    ctx.strokeStyle = "#0067ef"; 
    ctx.fillStyle  = "#0067ef"; 
    ctx.lineCap  = "round"; 
    ctx.lineWidth  = "15"; 
    ctx.globalAlpha = 1; 
    ctx.shadowBlur = 0; 
    ctx.shadowOffsetX = 0; 
    ctx.shadowOffsetY = 0; 
    ctx.shadowColor = "#363636"; 
    ctx.beginPath(); 
    ctx.moveTo(10, 10); 
    ctx.lineTo(200, 200); 
    ctx.stroke(); 
    ctx.closePath(); 

    // second object (has shadow) 
    ctx.shadowBlur = 5; 
    ctx.shadowOffsetX = 5; 
    ctx.shadowOffsetY = 5; 
    ctx.shadowColor = "#363636"; 
    ctx.beginPath(); 
    ctx.moveTo(300, 10); 
    ctx.lineTo(400, 200); 
    ctx.stroke(); 
    ctx.closePath(); 

    // Canvas is saved to data:image once. 
    var save = canvas[0].toDataURL(); 

    // clear canvas 
    ctx.clearRect(0, 0, 960, 480); 

    // redraw 
    var img = new Image(); 
     img.src = save; 
     img.onload = function() { 
      ctx.drawImage(this,0,0); 
     }; 
</script> 

這是正常的，當在之前的保存時的畫面重繪進行了調查。

重繪時出現兩個問題。

1. 陰影將應用於未繪製陰影的對象。
2. 如果保存並重繪重繪，陰影將變深。

我的代碼有缺陷嗎？

Answer 1

因爲你fillStyle和其他參數被保留下來，在圖像繪製，效果疊加起來。

使用save()和restore()防止這種情況：

ctx.save(); 
// first object (no shadow) 
ctx.strokeStyle = "#0067ef"; 
ctx.fillStyle  = "#0067ef"; 
/* 
... 
*/ 
ctx.closePath(); 
ctx.restore(); 

// Canvas is saved to data:image once. 

JSFiddle demo有一個額外的帆布和比較的附加圖像。

評論出save()和restore()並重新運行小提琴，你會注意到不同。