1

我面临着关于画布的问题。

画布保存到 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. 如果重复保存和重绘，阴影会变深。

我的代码有缺陷吗？

4

1 回答 1

1

因为你fillStyle和其他参数都被保留了，所以在绘制图像时，效果是叠加的。

使用save()andrestore()来防止这种情况：

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

// Canvas is saved to data:image once.

JSFiddle 演示，带有一个额外的画布和附加的图像以进行比较。

注释掉save()andrestore()并重新运行小提琴，你会发现不同。

于 2012-11-28T11:45:53.813 回答