如何从画布中删除对象？

Question

我正在制作这个脚本，它将使用画布在转速计上旋转指针。 我是这个画布的新手。 这是我的代码：

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 对象的画布。 我该怎么做？

谢谢。

亲切的问候，
马吕斯

Answer 1

使用clearRect清除画布（部分或全部）。 HTML canvas对象只是像素的平面位图，因此画布上没有“对象”的概念。

还要记住，JavaScript 是单线程的，所以你的 for 循环不会为针设置动画，它只会坐在那里并绘制所有更新，完成后浏览器实际上会以其最新状态刷新可见画布。

如果要为其设置动画，则必须创建一个渲染循环。 Dev.Opera 有一篇关于帧率控制的文章，它应该让你开始，然后你只需要在每一帧上为你的针设置动画。

Answer 2

简单的答案：以直角重新绘制画布。

使用 context.clearRect() 或将画布宽度设置为相同的值（将其更改为将清除画布的任何值）；

它很快，而且没有办法只移动针。 所有画布的东西都是这样构建的。

画。 改变？ 重绘。

Answer 3

当您使用静态背景图像并且只有针是动态的时，您可以简单地使用多个画布。 使用 css 将它们放在彼此的顶部。 将转速计图像添加到后面的画布上。 将针脚脚本应用到顶部画布。 这样您就不必每次更新针头时都重新绘制图像。 正如其他答案所解释的那样，重绘意味着清除上下文并再次绘制针。