2

バッファリングメソッドを使用してキャンバスを更新します。バッファキャンバスに画像を描画して実際のキャンバスに適用すると、実際のキャンバスには画像がありません。しかし、私は他のものを実際のキャンバスに適用することができます。

これは私のコードです：

var ctx = $('#canvas')[0].getContext("2d"),
    width  = $("#canvas").width(),
    height = $("#canvas").height(),
    buffer = $("<canvas>")[0].getContext("2d");
ctx.canvas.width = width;
ctx.canvas.height = height;
buffer.canvas.width = width;
buffer.canvas.height = height;
var image = new Image();
image.src = "img/logo.png";
$(image).load(function() {
    buffer.drawImage(image, 0, 0);
});
ctx.drawImage(buffer.canvas, 0, 0);
4

1 に答える 1

2

これらのイベントが発生しているため、機能していません。

  1. 通常のキャンバスに空のバッファを描画しています。
  2. 次に、画像の読み込みが完了します。
  3. 次に、画像がバッファに描画されます。これで画像付きのバッファができましたが、通常のキャンバスに描画されることはありません。

ctx.drawImageオンロードの内側にラインを配置する場合：

$(image).load(function() {
    buffer.drawImage(image, 0, 0);
    ctx.drawImage(buffer.canvas, 0, 0);
});

それはあなたが望むように働くでしょう。

于 2011-12-19T14:44:49.637 に答える