0

何らかの理由でcanvas何度も描画する必要があるこのコードがあります(を使用setTimeout):

function drawImage() {
    var img = new Image();
    var canvas = document.getElementById("event");
    var context = canvas.getContext("2d");
    img.src = "../img/event.png";
    img.onload = function () {
    context.drawImage(img, 0, 0);
   }
   setTimeout(drawImage, 3000);
}

ただし、次のように何度も描画すると、暗いエッジが発生します。

ダークエッジ

繰り返し描画でエッジが暗くなるのを防ぐことはできますか？

4

1 に答える 1

1

画像にアルファ チャネルがある限り、描画されたアルファ値をリセットするメカニズムなしで何度も再描画するときに、これを回避することはできません。

この理由は、そのピクセルのアルファ値が蓄積されるため、不透明でないエッジ (またはアンチエイリアスされたエッジ) を互いの上に描画すると、アルファ チャネルの値が既に描画されている値に追加されるためです。その結果、エッジがますます目立つようになります。

幸いなことに、これを回避する方法がいくつかあります。

A)画像にアルファチャンネルを保持したい場合は、画像をclearRect描画する前に使用してください。

context.clearRect(0, 0, img.width, img.height);
context.drawImage(img, 0, 0);

これにより、キャンバスとアルファ チャネルがクリアされます。

ONLINE DEMO

ここに画像の説明を入力

B)アルファ チャネルが重要でない場合は、アルファ チャネルなしで画像を保存します (透明度をオフにして PNG を使用するか、JPEG を使用します)。

例のループにも注意してください。これは、毎回画像のデコードと同様にロード/キャッシュ チェックを開始しているため、画像を再描画する良い方法ではありません。

コードを次のように変更できます (好きなように採用してください)。

var canvas = document.getElementById("event");
var context = canvas.getContext("2d");

var img = document.createElement('img'); // due to chrome bug
img.onload = drawImage;                  // set onload first

img.src = "../img/event.png";            // src last..

function drawImage() {
    context.clearRect(0, 0, img.width, img.height);
    context.drawImage(img, 0, 0);
    setTimeout(drawImage, 3000);
}
于 2013-07-19T22:58:47.187 に答える