1

キャンバスの描画に関する問題に直面しています。

Canvas は data:image に一度保存されます。
そして描き直させられます。
このとき、2 つの問題が発生します。

  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>

保存時と再描画前の画像を調べると正常でした。

再描画時に 2 つの問題が発生します。

  1. 影を描いていないオブジェクトに影が付きます。
  2. 保存と再描画を繰り返すと影が濃くなります。

私のコードには欠陥がありますか?

4

1 に答える 1

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.

キャンバスが 1 つ追加されたJSFiddle デモと、比較用の画像が追加されています。

save()andをコメントアウトしrestore()てフィドルを再実行すると、違いに気付くでしょう。

于 2012-11-28T11:45:53.813 に答える