Javascript | HTMLキャンバスエラー

黒いキャンバスに四角形を描画しようとしていますが、動作しません。Javascript | HTMLキャンバスエラー

window.onload = function() { 
 
    canvas = document.getElementById('canvas'); 
 
    canvasContext = canvas.getContext('2d'); 
 

 
    draw(); 
 
} 
 

 
function draw() { 
 
    canvasContext.fillstyle='black'; 
 
    canvasContext.fillRect(0,0,800,600); 
 
    canvasContext.fillstyle='white'; 
 
    canvasContext.fillRect(0,0,10,10); 
 
}

<canvas id="canvas" width="800" height="600"></canvas>

なぜそれが動作しません：これは私のコードですか？

出典

2017-09-04 Anne de Graaff

Hに塗りつぶしスタイルに

変更

canvasContext.fillstyle

の代わりに大文字の "S" の小文字の "s" を使用していましたello - 特に動作しないものは？それは何かを示していますか？ –

これは**問題ではありませんが、そのコードは[暗黙のグローバルの恐怖]（http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html）の犠牲になっています。 *（私の貧血の小さなブログの投稿です）*。適切なスコープで変数を宣言します。この場合、おそらく 'onload'ハンドラを削除して、HTMLの最後にある' script'のスコープ指定関数内に、 ''タグの直前にすべてのコードを入れておきます。 –

描画機能でcanvasContextにアクセスできません。 –

あなたは

canvasContext.fillStyle

window.onload = function() { 
 
    canvas = document.getElementById('canvas'); 
 
    canvasContext = canvas.getContext('2d'); 
 

 

 
    draw(); 
 

 
} 
 

 
function draw() { 
 
    canvasContext.fillStyle='black'; 
 
    canvasContext.fillRect(0,0,800,600); 
 
    canvasContext.fillStyle='white'; 
 
    canvasContext.fillRect(0,0,100,100); 
 

 

 
}

<canvas id="canvas" width="800" height="600"></canvas>

出典

2017-09-04 17:11:50

コードダンプは*役に立つ*解答ではありません。 *あなたが何を変えたのか、*なぜ*を言ってください。 –

さらに、タイプミスは答えが必要ではなく、コメントと（あなたができるときは）投票を閉じることができます。回答を投稿することで、OPが質問を削除するのを防ぐことができます。これは将来の他の人には役に立たないため、適切な行動のコースです（そして、彼らは下線からの担当者を受け入れる可能性があります）。 –

K私は私の答えを編集しました –

Javascript | HTMLキャンバスエラー

答えて

関連する問題