HTML5 CANVAS Shadow 一个错误？还是代码缺陷？

Question

我遇到了画布的问题。

画布保存到 data:image 一次。
它是用来重绘的。
此时出现两个问题。

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