HTML5删除画布中先前绘制的对象 [英] HTML5 Remove previous drawn object in canvas

问题描述

我在方法 moveTo 和 lineTo 。我想在画布中的不同位置重复绘制该对象（模拟移动对象）。我的问题是以前绘制的对象没有被清除。而是在画布上绘制多个图像。我该如何解决这个问题？

解决方案

画布只是像素数组，它们对你绘制的形状一无所知。 / p>



以前在位图显示上使用的动画技巧（例如xor drawing）可用于在绘制旧形状之前删除旧形状，但是在现代机器上，它通常更简单（并且非常快）只需擦除画布并为每一帧重新开始。

鉴于您对其他答案的评论，我建议只使用两个画布 - 一个用于静态背景，一个用于汽车。如果背景图像是静态的，它甚至可以是< img> 元素而不是画布。

如果汽车图像是静态的，您也可以只画一次，然后使用CSS定位来设置相对于每帧的背景的位置。

I have a polygon object (say a car) drawn inside a HTML5 canvas with help of methods moveTo and lineTo. I want to repeatedly draw that object at different positions in the canvas (simulating a moving object). My problem is that the previous drawn object is not getting cleared. Instead, multiple images are drawn on the canvas. How can I fix this issue?

解决方案

Canvases are just arrays of pixels, they know nothing of the shapes you have drawn.

There are animation tricks that used to be used on bitmapped displays (e.g. "xor drawing") that can be used to remove the old shape before you draw the new one, but on modern machines it's generally far simpler (and perfectly fast) to just erase the canvas and start again for each frame.

Given your comments to other answers, I'd suggest just using two Canvases - one for the static background and one for the car. If the background image is static it could even be an <img> element instead of a Canvas.

If the car image is static you could also just draw that once, and then use CSS positioning to set its position relative to the background for each frame.

这篇关于HTML5删除画布中先前绘制的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！