如何从画布中移除一个对象？

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循环之间，红色指针没有被清除。

我需要做的是在每个循环周期中清除针对象的画布。我该怎么做呢？

谢谢。

顺祝商祺，
Marius

- Mikkel Rev

---

请注意，像HTML或SVG这样的保留绘图模式系统会保留与绘制元素相关的特定对象，而像HTML Canvas这样的非保留绘图模式系统则不会。使用SVG，您可以在事后修改元素或文档并进行重绘；而使用HTML Canvas，则必须自己跟踪所有对象，并重新绘制所需的任何内容，如果要更改输出。 - Phrogz

Answer 1

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

还要记住 JavaScript 是单线程的，所以您的 for 循环不会使指针动起来，它只会坐在那里并绘制所有更新，在完成后浏览器将实际刷新可见画布以显示其最新状态。

如果要进行动画处理，则必须创建渲染循环。Dev.Opera 有一篇关于 帧速率控制系统 的文章，应该可以帮助您入门，然后您只需要在每个帧上对指针进行动画处理即可。

- Ivo Wetzel

---

第一个链接已更改：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes - Wang Tang

第一个链接又改变了：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes - Sean Haddy

Answer 2

简单回答：以正确的角度重新绘制画布。

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

这很快，没有办法只移动指针。所有画布内容都是这样构建的。

绘制。改变？重新绘制。

- shfx

Answer 3

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

- Jasper Moelker