Ani*_*ish 10 javascript html5 html5-canvas
借助方法moveTo和方法,我在HTML5画布中绘制了一个多边形对象(比如汽车)lineTo.我想在画布中的不同位置重复绘制该对象(模拟移动对象).我的问题是以前绘制的对象没有被清除.而是在画布上绘制多个图像.我该如何解决这个问题？
Tom*_*Tom 11
您必须在每个绘制框架的开头清除画布
context.clearRect(0, 0, canvas.width, canvas.height);
Aln*_*tak 10
画布只是像素阵列,它们对您绘制的形状一无所知.
以前用于位图显示的动画技巧(例如"xor drawing")可用于在绘制新形状之前移除旧形状,但在现代机器上它通常更简单(并且非常快)擦除画布并为每个帧重新开始.
鉴于您对其他答案的评论,我建议只使用两个画布 - 一个用于静态背景,一个用于汽车.如果背景图像是静态的,它甚至可以是一个<img>元素而不是Canvas.
如果汽车图像是静态的,您也可以只绘制一次,然后使用CSS定位来设置相对于每帧的背景的位置.