如何从画布中删除对象？

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有一篇关于帧率控制的文章,应该让你开始,然后你只需要在每帧上设置针的动画.