当我清除画布时出现"canvas.clearRect不是一个函数"的错误提示。

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 不是一个函数

我该如何解决这个问题？

谢谢。

- user10362551

---

s/canvas/context，你在上下文中执行操作，而不是在画布本身上。错误表明所显示的代码不是你正在运行的代码。否则它会抱怨 ctx.clearRect 而不是 canvas.clearRect。 - rlemon

canvas 是未定义的，对吧？ - Rayon

请将 var c = document.getElementById("game"); 和 var ctx = c.getContext("2d"); 放在函数外面，作为全局变量。此外，您可以在函数中使用 c.width, c.height 而不是 canvas.width, canvas.height。 - enxaneta

Answer 1

clearRect方法中，canvas.width和canvas.height会抛出错误，因为canvas未定义。你应该传递有效的对象。

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>

- Rayon

---

这是正确的，但会抛出一个完全不同于OP报告的错误。 - rlemon

@rlemon - 我执行了他的代码，而没有专注于他提到的错误。 - Rayon

还可以，但我仍然想看到产生该错误的实际代码。这里指出的错误在那种情况下甚至可能不存在。不过，你是正确的。我不想听起来对此有争议，只是OP需要做更多的工作，才能让我们合理地回答他们。 - rlemon

好的，现在我看到我的错误了，谢谢 :) 顺便问一下，使用Rayon解决方案会遇到哪种错误？ - user10362551

没有问题，他的解决方案是可行的代码。 :) 你的问题造成了困惑，因为你说你得到的错误消息在你分享的代码中是不可能出现的。 - rlemon