キャンバスが正しくレンダリングされないのはなぜですか？

Question

私はHTML5 <canvas>タグを使用してゲームを作ることにかなり精通しています。私がKomodo Edit 9から自分のゲームを動かそうとすると、完璧に動作します。

しかし、自分のゲームを任意のWebホスティングサービスにアップロードしようとすると、正常に動作しません。次のようなgarridpunching.neocities.org。

問題はキャンバスがレンダリングされるとすべてが1秒間表示されてから瞬時に消え、空白の黒いキャンバスだけが残ってしまうことです。 Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

エラーは、私がローカルホストから直接HTMLファイルを実行したときに完璧に動作ラインctx.drawImage(sprite.cursor, cursor.x, cursor.y, 40, 40);、上スローされます。

Googleのデバッガは、私が試したすべての5 hostingsために、次のエラーを返します。

これはどういう意味ですか、どうすれば修正できますか？前もって感謝します。

Answer 1

これは、正しく読み込まれていないimgに関連している可能性があります。イメージへのパスを確認してください。おそらく、ローカルのコンピュータで動作し、リモートサイトでは動作しないパスを持っているホスティングサービスに展開するときに、その一部をコピーしていない可能性があります。

また、jsと同じドメインのすべての画像を読み込みますか？これが当てはまらない場合は、Cross-Origin Resource Sharing (CORS)の問題によってトリガーされる可能性もあります。

Answer 2

これは、stepを呼び出す、つまりすべての画像が読み込まれる前に「ゲーム」を開始している可能性があります。解決方法は、stepを呼び出す前にスプライトの画像がロードされるのを待つことです。

load(); 
window.onload = step; // may need inline .onload() calls on sprite's imgs 

それはそれらをダウンロードするか、そのように何もする必要はありませんので、それは、即座に要求されたイメージをロードしますので、これはローカルに起こっされない理由があります。