JavaScriptを使用してキャンバスに画像を読み込む

JavaScriptを使用してキャンバスに画像をアニメーション化しようとしています。コンソールではすべてが予想どおりに進んでいるように見えますが、画像はキャンバスに読み込まれません。ここに私のコードですJavaScriptを使用してキャンバスに画像を読み込む

<body> 
    <canvas id="gameDisplay"> 

    </canvas> 
</body> 
<script> 
    var canvas = null; 
    var context = null; 
    var frameRate = 1000/30; 
    var frame = 0; 
    var assets = [ 
     'images/char.png', 
     'images/char1.png' 
    ]; 
    var frames = []; 

    var onImageLoad = function() { 
     console.log('IMAGE!!'); 
    }; 

    var setup = function() { 
     canvas = document.getElementById('gameDisplay'); 
     context = canvas.getContext('2d'); 
     canvas.width = window.innerWidth; 
     canvas.height = window.innerHeight; 

     for (var i = 0; i < assets.length; i++) { 
      frames.push(new Image()); 
      frames[i].src = assets[i]; 
      frames[i].onload = onImageLoad; 

     } 
    }; 
    var animate = function() { 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.drawImage(frames[frame], 192, 192); 
     frame = (frame + 1) % frames.length; 
    } 
    setup(); 
</script>

プロジェクトはhereです。

出典

2016-12-18 Nicholas Hendricks

'window.requestAnimationFrame（animate）'コールがありません。 –

私はちょっとわかりません。 –

あなたの 'animate'メソッドは決して呼び出されないので、イメージはロードされますが描画されることはありません。 'animate'メソッドをスケジュールする必要があります。一つの方法は、 'setup'と' animate'の両方の終わりに 'window.requestAnimationFrame（animate）'を置くことです。例えば、 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animationsを参照してください。 –

コードのバージョンが2つある場合は、答えが分かりません。質問のコードとリンク先の異なるコードを以下のコメントに入れてください。あなたはUdacityコースを実装しようとしており、指示に従わない場所が2つあります。 .srcの前に.onloadを設定する必要があります。
2 - setIntervalはアニメーション化されない設定で呼び出されますブラウザをクラッシュさせてしまったため、画像をダウンロードできませんでしたが、コースビデオのビデオ＃13を参照してください。

私はあなたが正しくキャンバスを取得されていませんし、あなたが一度あなたがdrawImageメソッドを呼び出すことができ、これらの MDN canvas api を試し、キャンバスやアニメーションドキュメントを読むために必要があると思います。また、requestAnimationFrame（）にアニメーションを表示するには、これを試してを起動してください。 requestAnimationFrame

出典

2016-12-18 03:47:59 RGB

アレイの最後の1つだけ他のイメージをロードしていませんか？ –

私はsetTimeoutを追加してすべての画像をロードしたので、このようにアニメーション化するのは悪いです!!それはしばらくしてから遅くなり、ちょうどエッジでうまく動作しません –

あなたの質問のリンクはあなたの質問のコードとは異なるコードを持っています。まず、requestAnimationFrameを使用してこれをリファクタリングします。それはそれほど難しくありません。とにかく、（ライブサイトの）アニメート機能でsetTimeoutを使用していると、数分後にマシンがクラッシュします。いくつかのイメージを読み込んでいて、すべてではない場合は、配列を正しくループしていません。なぜフレーム配列のインデックスにモジュラスを使用していますか？実際には、drawImageでアセット配列を使用するだけでは、フレームアレーのポイントが表示されません。正直、私はあなたがやり直す必要があると思います。 – RGB

JavaScriptを使用してキャンバスに画像を読み込む

答えて

関連する問題