Question

我正在尝试在HTML5画布上绘制一个圆并四处移动。

我编写了以下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>

当我尝试执行它时，在控制台中出现此错误：

TypeError：canvas.clearRect不是函数

我该如何解决？

谢谢。

Answer 1

在clearRect方法中，canvas.width和canvas.height将抛出错误，因为canvas是 undefined 。您应该传递有效的对象。

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>

当我清除画布时，“ canvas.clearRect不是函数”

1 个答案: