Javascript脚本没有'；不能在HTML中加载

这是CSS文件

*{
  margin: 0;
  padding: 0;
}

.canvas{
  background-color: #b7b7b7;
}

和javascript文件。

---

我正在尝试创建一个突破游戏，我正在遵循udemy的教程。不幸的是，这段代码似乎有问题，但我不知道是什么。我验证了代码一千次，但没有发现任何东西。

这是因为在

var画布中，您正在调用
document.getElementByClassName
，它将返回一个“。因此，我建议您使用ID，而不是选择使用类。

var context=canvas.getContext（'2d'）；
应该是
var context=canvas[0].getContext（'2d'）；
，因为您使用的是
document.getElementsByClassName
，它将返回具有该类名的所有元素的集合。您需要第一个元素的上下文
context.drawRect
应该是
context.rect
context.fillStyle
不是一个函数，它应该是
context.fillStyle=“#0022ff”
context.endPath（）；
应该是
context.closePath（）；
在您的情况下，不需要
context.beginPath（）；
和
context.closePath（）；
context.rect
已经创建了路径


var canvas=document.getElementsByClassName（'canvas'）；
var context=canvas[0]。getContext（'2d'）；
context.rect（20,30,50,40）；
context.fillStyle=“#0022ff”；
context.fill（）；
*{
保证金：0；
填充：0；
}
.帆布{
背景色：#b7b7；
}
使用fillRect而不是drawRect:

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


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.fillRect（20,30,50,40）；
ctx.endPath（）；
尝试
var-context=canvas[0].getContext（'2d'）；
或
var-canvas=document.querySelector（'.canvas'）；
@hungerstar+1，但别忘了提到：在多个
.canvas
的情况下，最好使用
querySelectorAll
True，与
queryselectoral（）
您得到一个节点列表，需要再次使用
canvas[0]
。按类名选择没有错，只是取决于所使用的方法。
getElementByClassName（）
返回一个类似数组的对象，如您所说，
querySelector（）
将使用指定的选择器返回第一个元素，在本例中为
.canvas
。但是，是的，如果您想针对单个元素，并且不想冒险，那么ID是一个不错的选择。谢谢。我意识到我使用了fillStyle作为一种方法。这就是问题所在。我列出了一些问题。是的。谢谢非常多。
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();

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.fillRect(20,30,50,40);
ctx.endPath();


</script>