Warum HTML5 Canvas nicht gezeichnet wird, wenn das Skript innerhalb des head-Tags platziert wird?

Beim Zeichnen von Grafiken mit HTML canvas, während <script> in Ihrem Dokument <head> setzen, funktioniert nicht. Zum Beispiel:Warum HTML5 Canvas nicht gezeichnet wird, wenn das Skript innerhalb des head-Tags platziert wird?

<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>

Aber Sie tun, um die erwarteten Ergebnisse erhalten, wenn <script> innen <body> platziert wird. Da Sie die <script> irgendwo innerhalb platzieren können, warum funktioniert das nicht mit canvas? Danke im Voraus!

Quelle

2017-01-28 Chaitanya Bhardwaj

Das liegt daran, dass Sie versuchen, auf das Canvas-Element zuzugreifen, bevor es im DOM existiert. Platzieren Sie Ihren Code in einem 'window.onload' oder nachdem der Canvas geladen wurde oder platzieren Sie ihn nach dem DOM-Element in HTML (Skript am Ende des Rumpfes). –

Ihr HTML wird noch nicht gerendert, also document.getElementById ("myCanvas") Kann das myCanvas-Element nicht finden. Wenn Sie den Code nachher platzieren, wird der HTML-Code gerendert, sodass er gefunden werden kann.

Wenn Sie es in den Kopf platzieren möchten, verwenden Sie ein Ereignis beim Laden von Dokumenten, um es zu rendern, sodass es nach dem Rendern des HTML-Codes ausgeführt wird.

Überprüfen Sie diesen Code:

<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>

Quelle

2017-01-28 17:18:01 poushy

Ich habe den Code in '$ (document) .ready (function() {// CODE});'. Immer noch nicht funktioniert –

Ich habe mit Code aktualisiert. Sie können diesen Code auch überprüfen: http://codepen.io/poushy/pen/JEOBKp – poushy

Wenn Sie jQuery verwenden, stellen Sie sicher, dass jQuery vor dem Skript initialisiert wird. – poushy

Das DOM ist noch nicht geladen ist, sollten Sie das Skript innerhalb der Callback-Funktion des put "OnDOMContentLoaded" event

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

Oder Sie können Ihr Skript am Ende des Körpers setzen

Quelle

2017-01-28 17:20:16 Lauromine

Warum HTML5 Canvas nicht gezeichnet wird, wenn das Skript innerhalb des head-Tags platziert wird?

Antwort

Verwandte Themen