Question

<!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的教程。不幸的是，这段代码似乎有问题，但我不知道是什么。我验证了代码一千次，但我找不到任何东西。

Answer 1

这是因为在您的var canvas中，您正在呼叫document.getElementByClassName，这将返回＆＃34; array-like" object。因此，我建议您使用ID而不是选择使用类。

Answer 2

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

* {
  margin: 0;
  padding: 0;
}

.canvas {
  background-color: #b7b7b7;
}

<canvas width="900" height="450" class="canvas"></canvas>

Answer 3

使用fillRect而不是drawRect：

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

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


</script>

Javascript脚本不会加载HTML

3 个答案: