0

drawImage() 関数を使用して Javascript アニメーションに画像を読み込みたいのですが、現在のコードでは画像が読み込まれません。ある時点で画像をロードするように具体的に要求する必要があると思いますが、いつ、どのようにロードするかわかりません。アイデアは、キャンバスを横切る雲を作ることです。ご協力ありがとうございました。

function draw(x,y){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    x += 2;
    if(x>1000){
        x=0;
    }

    var cloud = new image();
    cloud.src='small_cloud.png';
    ctx.drawImage(cloud,x,0);

    var loopTimer = setTimeout('draw('+x+','+y+')',20);

}
4

1 に答える 1

2

new Image()ではなく試してみてくださいnew image()

移動も

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');    
var cloud = new image();
cloud.src='small_cloud.png';

draw()これらを一度だけ設定したいので、関数の外に。ブラウザがドキュメントを解析する時間ができるまで、この設定を遅らせます。

window.onload = function(){ ... };

(ただし、実際には、適切な偶数ハンドラー登録を使用して、既存の window.onload リスナーを上書きしないようにする必要があります。) また、次のdraw()ように、イメージが読み込まれるまで最初の呼び出しを遅らせます。

cloud.onload = function(){
    draw(cloud, 0, 0);
}

私も変わるだろう

var loopTimer = setTimeout('draw('+x+','+y+')',20);

に

setTimeout(function(){ draw(x, y); }, 20);

loopTimer 変数を使用していないようであり、 setTimeout を文字列ではなく匿名関数に渡すことをお勧めします。

最終的には、次のようになります。

window.onload = function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');    
    var cloud = new image();
    cloud.src='small_cloud.png';    
    cloud.onload = function(){
        draw(ctx, cloud, 0, 0);
    };
};

function draw(ctx, cloud, x,y){
    x += 2;
    if(x>1000){
        x=0;
    }

    ctx.drawImage(cloud,x,0);

    setTimeout(function(){ draw(ctx, cloud, x, y); }, 20);
}

ctx は draw() 関数内で定義されなくなったため、無名の window.onload 関数に対してローカルであるため、ctx を draw() 関数にも渡す必要があることに注意してください。

于 2013-02-07T09:09:59.067 に答える