Javascript 在引用外部js脚本后，HTML中不会出现任何内容_Javascript_Animation_Canvas

Javascript 在引用外部js脚本后，HTML中不会出现任何内容

javascript animation canvas

Javascript 在引用外部js脚本后，HTML中不会出现任何内容,javascript,animation,canvas,Javascript,Animation,Canvas,我正在尝试使用javascript在html中绘制一个球。HTML文件引用javascript，因为它是一个外部脚本。然而，我只能得到一张空白页作为回报。有人能帮忙吗？谢谢 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device=width,initial-scale=1.0"> <script type = "

我正在尝试使用javascript在html中绘制一个球。HTML文件引用javascript，因为它是一个外部脚本。然而，我只能得到一张空白页作为回报。有人能帮忙吗？谢谢

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

在前面移动鼠标

错误出现了，因为脚本是在呈现主体之前执行的，并且因为变量canvas为null，并且使用它的所有内容都会被破坏

我建议始终打开devtools，这样您就可以调试并查看错误

控制台中有错误吗？

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();
  }
};