なぜスクリプトがheadタグの中に置かれてもHTML5 Canvasが描画されないのですか？

<script>を文書の<head>に入れているときに、HTML canvasのグラフィックスを描画すると機能しません。たとえば、次のようになぜスクリプトがheadタグの中に置かれてもHTML5 Canvasが描画されないのですか？

<head> 
    <script> 
     var canvas = document.getElementById("myCanvas"); 
     if(canvas.getContext("2d")) 
      var ctx = canvas.getContext("2d"); 
     ctx.moveTo(0,0); 
     ctx.lineTo(200,100); 
     ctx.stroke(); 
    </script> 
</head> 
<body> 
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 
     Your browser does not support the canvas element. 
    </canvas> 
</body>

しかし<script>が<body>の内側に配置されたとき、あなたは期待どおりの結果を得るのですか。 <script>を<head>の中に置くことができるので、なぜこれがcanvasと一緒に動作しないのですか？前もって感謝します！

出典

2017-01-28 Chaitanya Bhardwaj

これは、キャンバス要素がDOM内に存在する前にキャンバス要素にアクセスしようとしているためです。あなたのコードを 'window.onload'の中に置くか、キャンバスがロードされた後に、またはDOM要素の後にHTMLの中に置きます（本文の最後のスクリプト）。 –

HTMLはまだレンダリングされていないので、 document.getElementById（ "myCanvas"） myCanvas要素が見つかりません。後にコードを置くと、HTMLがレンダリングされるため、コードを見つけることができます。

ヘッドに配置する場合は、ドキュメントのロード時にイベントを使用してレンダリングします。これにより、HTMLがレンダリングされた後に実行されます。

はチェックこのコード：

<head> 
 
    <script> 
 
     document.addEventListener("DOMContentLoaded", function(event) { 
 
     var canvas = document.getElementById("myCanvas"); 
 
     if(canvas.getContext("2d")) 
 
      var ctx = canvas.getContext("2d"); 
 
     ctx.moveTo(0,0); 
 
     ctx.lineTo(200,100); 
 
     ctx.stroke(); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 
 
     Your browser does not support the canvas element. 
 
    </canvas> 
 
</body>

出典

2017-01-28 17:18:01 poushy

私は '$（document）.ready（function（）{// CODE}）;'の中にコードを入れました。まだ動作しません –

私はコードを更新しました。このコードを確認することもできます：http://codepen.io/poushy/pen/JEOBKp – poushy

jqueryを使用している場合は、スクリプトの前にjqueryを初期化してください。 – poushy

DOMがまだロードされていない、あなたは "OnDOMContentLoaded" イベント

document.addEventListener("DOMContentLoaded", function(event) { 
    //your script 
});

のコールバック関数内でスクリプトを置く必要がありますまたは、あなたの脚本を身体の最後に置くことができます

出典

2017-01-28 17:20:16 Lauromine

なぜスクリプトがheadタグの中に置かれてもHTML5 Canvasが描画されないのですか？

答えて

関連する問題