javascript - 清除 Canvas 时为 "canvas.clearRect is not a function"

Question

我正在尝试在 HTML5 Canvas 中绘制一个圆圈并四处移动。

我写了这段 Javascript 代码:

var a = 0;
      function draw() {
        var c = document.getElementById("game");
        var ctx = c.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(45+a, 45, 40, 0, 2 * Math.PI);
        ctx.stroke();
        a++;
      }
      var t=setInterval(draw,1000);

<canvas id="game" width="640" height="480"></canvas>

当我尝试执行它时，我在控制台中收到此错误:

类型错误:canvas.clearRect 不是函数

我该如何解决？

谢谢。

Answer 1

在 clearRect 方法中，canvas.width 和 canvas.height 会抛出错误，因为 canvas 是 < em>未定义。您应该传递有效对象。

var a = 0;

function draw() {
  var canvas = document.getElementById("game");
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(45 + a, 45, 40, 0, 2 * Math.PI);
  ctx.stroke();
  a++;
}
var t = setInterval(draw, 1000);

<canvas id="game" width="640" height="480"></canvas>