Question

我正在尝试使用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>

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

Answer 1

在<script type = "text/javascript" src="projectscripts.js"></script>之前移动</body>。

错误来了，因为脚本是在渲染正文之前执行的，因此变量canvas是null并且所有正在使用它的东西都是＃34;打击＆＃34;。

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

引用外部js脚本后，HTML中没有任何内容出现

1 个答案: