引用外部js腳本後HTML中沒有任何內容出現

我想在使用javascript的HTML中繪製一個球。 JavaScript由HTML文件引用，因爲它是外部腳本。但是，我只收到一個空白頁面。有人可以幫忙嗎？謝謝！引用外部js腳本後HTML中沒有任何內容出現

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device=width,initial-scale=1.0"> 
     <script type = "text/javascript" src="projectscripts.js"></script> 
    </head> 
    <body onload="ball.draw()"> 
<canvas id="canvas" width = "3000" height = "3000"></canvas> 
    </body> 
</html>

在我的JavaScript文件：

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

var ball = { 
    x: 600, 
    y: 300, 
    radius: 25, 
    color: 'blue', 
    draw: function() { 
    ctx.beginPath(); 
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); 
    ctx.closePath(); 
    ctx.fillStyle = this.color; 
    ctx.fill(); 
    } 
};

來源

2015-10-08 Brenda So

控制檯中的任何錯誤？ – www139

的<script type = "text/javascript" src="projectscripts.js"></script>只是</body>前移動。

錯誤出現了，因爲腳本是在呈現正文之前執行的，並且因爲變量canvas是null以及正在使用它的所有內容都「打擊」了。

我建議始終打開devtools，以便調試和查看錯誤。

來源

2015-10-08 14:47:17

引用外部js腳本後HTML中沒有任何內容出現

回答

相關問題