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

感谢。

亲切的问候，
的Marius

Answer 1

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

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

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

Answer 2

简单回答：用直角重绘画布。

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

速度快，无法移动针头。所有帆布的东西都是这样构建的。

绘制。更改？重绘。

Answer 3

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

如何从画布中删除对象？

3 个答案: