<!DOCTYPE html>
<html>
<head>
<title>Breakout</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas width="900" height="450" class="canvas"></canvas>
<script src="scripts/base.js"></script>
</body>
</html>
这是索引文件
*{
margin: 0;
padding: 0;
}
.canvas{
background-color: #b7b7b7;
}
这是CSS文件
var canvas = document.getElementsByClassName('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.drawRect(20,30,50,40);
context.fillStyle("#0022ff");
context.fill();
context.endPath();
和 javascript 文件。 我正在尝试创建一个突破游戏，并且我正在按照 udemy 的教程进行操作。不幸的是，这段代码似乎有问题，但我不知道是什么。我验证了代码一千次，但没有找到任何东西。
最佳答案
那是因为在您的 var canvas 中，您正在调用 document.getElementByClassName，它将返回一个 "array-like" object。所以，我建议您使用 ID而不是使用类进行选择。
关于Javascript 脚本不会在 HTML 中加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44444806/