如何从画布上删除对象？
我正在制作这个脚本，它将使用画布旋转转速计上的指针。我是这块画布的新手。这是我的代码：
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 循环之间的红色针没有被移除。
我需要做的是在循环的每个周期之间清除引脚对象的画布。我该怎么做？
谢谢。
亲切的问候，
马吕斯
I am making this script that will rotate a needle on a tachometer using canvas. I am a newbie to this canvas. This is my code:
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
}
}
Here is the script in action:
http://www.kingoslo.com/instruments/
The problem is, as you can see, that the red needle is not removed beetween each for-loop.
What I need to do is to clear the canvas for the pin object between each cycle of the loop. How do I do this?
Thanks.
Kind regards,
Marius
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
使用 clearRect 清除画布（它或整个事情）。 HTML
canvas对象只是像素的平面位图，因此画布上没有“对象”的概念。另请记住，JavaScript 是单线程的，因此您的 for 循环不会为针设置动画，它只会坐在那里绘制所有更新，完成后浏览器实际上会刷新可见画布的最新状态。
如果你想动画化它，你将必须创建一个渲染循环。 Dev.Opera 有一篇关于帧速率控制的文章，这应该可以帮助您开始，然后您只需在每一帧上设置针的动画即可。
Use clearRect to clear the canvas (either parts of it or the whole thing). An HTML
canvasobject is just a flat bitmap of pixels, so there is no notion of "objects" on the canvas.Also keep in mind that JavaScript is single threaded, so your for loop will not animate the needle, it will just sit there and draw all the updates, after it's done the browser will actually refresh the visible canvas with its latest state.
If you want to animate it you will have to create a rendering loop. Dev.Opera has an article about framerate control, that should get you started, then you just need to animate your needle on each frame.
简单的答案：以直角重新绘制画布。
使用 context.clearRect() 或将画布宽度设置为相同的值（将其更改为任何值都会清除画布）；
它速度很快，而且无法只移动针。
所有画布的东西都是这样构建的。
画。改变？重画。
Simple answer: Redraw the canvas with right angle.
Use context.clearRect() or set the canvas width to the same value (changing it to whatever value will clear the canvas);
It's fast and there is no way to move just the needle.
All canvas stuff are build that way.
Draw. Change? Redraw.
当您使用静态背景图像并且只有针是动态的时，您可以简单地使用多个画布。使用 css 将它们放置在彼此的顶部。将转速计图像添加到后面的画布上。将针脚本应用到顶部画布。这样您就不必在每次更新针时重新绘制图像。正如其他答案所解释的那样，重画意味着清晰的上下文并再次绘制针。
As you are using a static background image and only the needle is dynamic you could simply use multiple canvases. Position them on top of each other using css. Add the tachometer image to the canvas in the back. Apply the needle script to the top canvas. This way you don't have to redraw the image everytime you update the needle. And as the other answers explain redraw means clear context and draw needle again.