1

このようなループで配列から画像を描画しようとしています:

var frames = [];
for(var i=0;i<assets.length;i++){
    frames[i] = new Image();
    frames[i].onload = function() {
        ctx.drawImage(frames[i],10,10);         
    };
frames[i].src = assets[i];

そしてエラーを取得します：

値を次のいずれにも変換できませんでした: HTMLImageElement、HTMLCanvasElement、HTMLVideoElement。

「frames[i]」が drawImage() に渡される方法が問題を引き起こしているようです。なぜそうなのか、それを行う適切な方法は何ですか? onload 関数が呼び出されるコンテキストでは、変数 "i" は有効ではありませんか?

ありがとう

4

2 に答える 2

0

あなたの問題は、onloadコールバックが非同期であるため、コールバック関数が呼び出されると、ループが終了し、i変数が定義されていない可能性があることです。とにかく、thisキーワードはコールバック内の画像を指します:

var frames = [];
for (var i=0; i<assets.length; i++) {
    frames[i] = new Image();
    frames[i].onload = function() {
        ctx.drawImage(this, 10, 10);         
    };
    frames[i].src = assets[i];
}

次に発生する可能性のある問題は、イメージがキャンバスに描画される順序を制御できないことです。このJsFiddleを参照してください。

于 2013-08-28T15:59:15.103 に答える