エラー：画像が定義されていません（Image（）関数を使用している場合のトラブル）

Question

非常に単純なコードを使用します（Image.pngの代わりに画像を使用します）。私はキャンバスに背景イメージを与えようとしています。

var canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 

var img = new Image(); 
img.onload=start; 
img.src="Image.png"; 
function start(){ 
ctx.drawImage(img,0,0); 
} 

しかし、私はこのエラーが表示されます。 ERROR： '画像' が定義されていません。 [無undefを]一部について：

var img = new Image().

私は

var img = document.createElement("img");

でこれを置き換えることを試みた後、エラーがなくなっていませんが、何も表示され、一切の画像、そのちょうど空。 誰かが私が間違っていることを知っていますか？ ありがとうございます！

FULL CODE

var document; 
var ctx; 
var window; 

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

function start(){ 

    var canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 


    var img = document.createElement("img"); 
    img.src="image.png"; 
    img.onload=start; 

    function start(){ 
    ctx.drawImage(img,0,0,400,400); 
    } 
} 

Answer 1

あなたがDOMに作成した画像を添付する必要があります。

document.getElementById("image-container").appendChild(img); 

編集：私はあなたがキャンバスオブジェクトに描画しているのを見ています。その場合は、画像が正しく読み込まれていないと思われます。

2つのアイデア：start（）関数内にデバッグ出力を追加したり、ブレークポイントを設定したり、その時点で 'img'に含まれている内容を調べることができます。または、devtoolsコンソールの[ネットワーク]タブでステータスコードを確認することもできます。または、画像をwww.google.com/images/logo.pngのように動作することがわかっているものと置き換えることもできます。これはすべてあなたが問題を絞首刑にするべきです。

注：あなたがそれを宣言するべきではありませんので、windowはグローバル変数であり、windowなどwindow.documentとしての性質である名前もグローバルです - それを宣言せずdocumentとして参照することができます。場合によっては、JSフレームワークは不平を言いますが、これを解決するフレームワーク固有の方法があります。これらの変数の重複した宣言は、下に行く良い方法ではありません。

ESlintのエラーに応じてこれらを追加する場合は、プロジェクトルートにeslintrc.jsonを追加してください（まだ持っていない場合）。それに次のプロパティを指定すると、ブラウザのグローバルには不満はありません：

{ 
    "env": { 
    "browser": true 
    }                  
} 

Imageが定義されていない理由は、現代のブラウザ環境では起こりません。それはあなたの環境設定で何かでなければなりません。このコードをどのように実行しているかについて、あなたが提供できる情報はありますか？

Answer 2

画像のsrcを設定する前に、onloadコールバックを設定してみてください。画像がキャッシュされている場合

var img = document.createElement("img"); 
img.onload=start; 
img.src="image.png"; 

、そしてonloadはすぐにそれがstartsee this questionに割り当てられている、すなわち前に、設定されているsrcとして解雇されるだろう。