Question

我遇到了画布画的问题。

Canvas保存到数据：图像一次。
它被重新绘制。
此时出现两个问题。

阴影将应用于未绘制阴影的对象。
如果保存并重复重绘，阴影会变深。

<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>

保存时和重绘前的图片被调查是正常的。

重绘时出现两个问题。

阴影将应用于未绘制阴影的对象。
如果保存并重复重绘，阴影会变深。

我的代码有缺陷吗？

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

HTML5 CANVAS影子一个bug？还是代码缺陷？

1 个答案: