javascript - 如何从 Canvas 中删除对象？

Question

我正在制作这个脚本，它将使用 Canvas 在转速表上旋转指针。我是这个 Canvas 的新手。这是我的代码:

function startup() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var meter = new Image();
  meter.src = 'background.png';
  var pin = new Image();
  pin.src = 'needle.png';
  context.drawImage(meter,0,0);
  context.translate(275,297);
  for (var frm = 0; frm < 6000; frm++){
    var r=frm/1000;               //handle here                                
    var i=r*36-27;  //angle of rotation from value of r and span
    var angleInRadians = 3.14159265 * i/180;  //converting degree to radian                
    context.rotate(angleInRadians); //rotating by angle
    context.drawImage(pin,-250,-3);  //adjusting pin center at meter center
  }
}

这是运行中的脚本:

http://www.kingoslo.com/instruments/

问题是，如您所见，每个 for 循环之间的红色针没有被移除。

我需要做的是在循环的每个周期之间清除 pin 对象的 Canvas 。我该怎么做？

谢谢。

亲切的问候，
马吕斯

Answer 1

使用clearRect清除 Canvas (它的一部分或整个东西)。 HTML canvas 对象只是像素的平面位图，因此在 Canvas 上没有“对象”的概念。

另请记住，JavaScript 是单线程的，因此您的 for 循环不会为指针设置动画，它只会坐在那里并绘制所有更新，完成后浏览器实际上会使用最新状态刷新可见 Canvas 。

如果你想让它动起来，你必须创建一个渲染循环。 Dev.Opera 有一篇关于 framerate control 的文章，这应该让你开始了，然后你只需要在每一帧上为你的针设置动画。