Question

我正在尝试绘制画布上非常基本的内容，但是它没有绘制任何内容，也没有显示任何要修复的错误。这里可能是什么问题？

这是我的代码：

我还尝试将js代码移动到外部js文件中，但是没有用。

<body>
<canvas
  id="myCanvas"
  width="800"
  height="500"
  style="border:1px solid #474747;"
></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect = (10, 100, 15, 400);
</script>

Answer 1

您的问题在于：

ctx.fillRect = (10, 100, 15, 400);

.fillRect()是一种以x, y, width, height作为参数的方法，因此您需要这样调用它：

ctx.fillRect(10, 100, 15, 400);

请参见以下示例：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 100, 15, 400);

<canvas id="myCanvas" width="800" height="500" style="border:1px solid #474747;"></canvas>

Answer 2

ctx.fillRect = (10, 100, 15, 400); <-fillRect（）是一个函数，您正在将其用作表达式。

  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(10, 100, 15, 400);

<canvas
  id="myCanvas"
  width="800"
  height="500"
  style="border:1px solid #474747;"
></canvas>

无法在画布上绘画。可能是什么问题？

2 个答案: