4

stackoverflow で説明されている IE 9 と HTML5 cnvases への画像の描画に関する同様のタイミングの問題を見つけましたが、私のものとまったく一致するものはありません。

画像の onload 関数が定期的に呼び出されるという問題が発生していますが、まだキャンバスに描画する準備ができていません。(キャンバスは空白のままです)。onload 内では、イメージの "complete" プロパティは常に true であり、"width" および "height" プロパティには常に期待される値が含まれます。例外はスローされません。画像をキャンバスに描画する前にオンロードを少し遅らせると、空白の描画が行われることはありません。マウス クリックなどのイベントに画像を描画する別の試みを関連付けることもできますが、これは常に成功します。これは Chrome や Firefox では見られません。洞察に感謝します。ありがとう！

var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;

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

var image = new Image();

image.onload = function()
{   
    // this.complete always true here
    // A delay here seems to guarantee the draw will succeed
    context.drawImage(this, 0, 0);  // Half the time canvas remains blank after draw
    // If the canvas is still blank, a later call to context.drawImage with this image will succeed

}

image.src = "some.png";
4

1 に答える 1

0

ボディにキャンバスを追加する場所がわかりません。それは意図的なものですか?

とにかくcreateElement中に入れてみるonload

これは物事を一貫して良いものにしていますか？

    var canvas;
    var context;

    var image = new Image();

    image.onload = function()
    { 
        canvas = document.createElement('canvas');
        canvas.width = 640;
        canvas.height = 480;
        document.body.appendChild(canvas);
        context = canvas.getContext("2d");

        context.drawImage(this, 0, 0);  // Half the time canvas remains blank after draw
    }
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/city-q-c-640-480-6.jpg";
于 2013-04-25T19:17:56.533 に答える