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()并重新运行小提琴，你会注意到不同。