27

キャンバス要素に画像を描画しています。次に、このプロセスに依存するコードを完成させます。私のコードは次のようになります：

var myContext = myCanvasElement.getContext('2d'),
    myImg = new Image();

myImg.onload = function() {
    myContext.drawImage(containerImg, 0, 0, 300, 300);
};

myImg.src = "someImage.png";

では、drawImageが完了したときに通知を受け取りたいと思います。仕様を確認しましたが、イベントもコールバック関数を渡す可能性も見つかりませんでした。これまでのところ、タイムアウトを設定しただけですが、これは明らかにあまり持続可能ではありません。この問題をどのように解決しますか？

4

5 に答える 5

23

ほぼすべての Javascript 関数と同様に、同期drawImage的です。つまり、本来の処理を実際に実行した後にのみ戻ります。

つまり、他のほとんどの DOM 呼び出しと同様に、次にブラウザーがイベント ループに入ったときに再描画されるもののリストをキューに登録することになっています。

そのようなイベントハンドラーが呼び出されるまでに、再描画が既に行われているため、それがいつなのかを明確に登録できるイベントはありません。

于 2012-06-26T12:45:52.240 に答える
9

Jef Claes は、彼のウェブサイトでとてもよく説明しています。

ブラウザは、スクリプトが既に解釈および実行されている間、画像を非同期的にロードします。画像が完全に読み込まれていない場合、キャンバスはレンダリングに失敗します。

幸いなことに、これを解決するのは難しくありません。読み込みが完了したことを通知する画像からのコールバックを受け取るまで、描画を開始するのを待つ必要があります。

<script type="text/javascript">        
window.addEventListener("load", draw, true);

function draw(){                                    
    var img = new Image();
    img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";                
    img.onload = function(){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');    

        context.drawImage(img, 0, 0);        
    };            
}

于 2013-08-13T15:31:45.767 に答える
3

画像が読み込まれたときに既にイベントがあり、1 つのこと (描画) を行います。別のことをして、後で実行したいことを実行する関数を呼び出してみませんdrawImageか? 文字通りただ：

myImg.onload = function() {
    myContext.drawImage(containerImg, 0, 0, 300, 300);
    notify(); // guaranteed to be called after drawImage
};
于 2012-06-26T13:32:42.547 に答える