Javascript 画布上的图形未正确清除？

我正试图从我的画布游戏中挤出最后一点表现；最近我发现清除画布的性能非常高，所以我试图找到一种方法来代替每帧清除整个画布。然而，我发现我正在尝试的新方法存在一些问题，即分别清除每个对象的边界框，然后更新它们

问题是，当元素离开画布时，它们会被“甩在后面”，而图像的某些部分会保留下来。我试着简化代码，以确保问题不在代码的其余部分，也没有乐趣

返回到每个帧擦除整个画布也是不可取的，特别是因为这种新方法速度更快。下面是代码（由于某些原因，它不能作为一个应用程序工作）

var-enemyCtx=document.getElementById（'敌人'）.getContext（'2d'）；
var博弈=
{
w:800，
h:500
};
var=[]；
addEventListener（'load'，function（））
{
对于（变量i=0；i<200；i++）
{
敌人[敌人.长度]=新敌人（）；
}
更新（）；
}，假）；
var buffer=document.createElement（'canvas'）；
缓冲区宽度=42；
缓冲区高度=42；
var bufferCtx=buffer.getContext（'2d'）；
付款人（bufferCtx，5，5，32，32，'红色'）；
函数更新（）
{
对于（变量i=0；i<0.length；i++）
{
enemyCtx.clearRect（敌人[i].x，
敌人[i].y，
敌人[i]。x+敌人[i]。宽度，
敌人[i].y+敌人[i].身高）；
}
对于（变量i=0；i<0.length；i++）
{
敌人[i].x-=5；
enemyCtx.drawImage（缓冲区，敌人[i].x-5，敌人[i].y-5）；
}
requestAnimationFrame（更新）；
}
功能抽屉（ctx、x、y、宽度、高度、颜色）
{
ctx.lineWidth=1；
ctx.strokeStyle=颜色；
ctx.冲程（x+0.5，y+0.5，宽度，高度）；
}
功能敌人（）
{
this.x=Math.random（）*game.w；
this.y=Math.random（）*game.h；
这个宽度=32；
这个高度=32；
}
（功能（）
{
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var lastTime=0；
var供应商=['ms'，'moz'，'webkit'，'o']；
对于（var x=0；x

&html:

<canvas id="enemy" width="800" height="500"></canvas>​

​

---

你们能给我的任何见解都是非常有用的；谢谢

对此有了更多的思考，我想出了一个解决方案；也许这对你们有些好处

基本上，图像在画布上是“遗留”的，因为clearRect（）方法需要处理实际的画布坐标。因为图像将离开画布，所以其坐标将为负值

function update()
{
    for (var i = 0; i < enemies.length; i++)
    {
        lx = (enemies[i].x > 0) ? enemies[i].x : 0;
        ly = (enemies[i].y > 0) ? enemies[i].y : 0;
        enemyCtx.clearRect( lx,
                            ly,
                            lx + enemies[i].width + 1,
                            ly + enemies[i].height + 1);
    }
    // ...
}

函数更新（）
{
对于（变量i=0；i<0.length；i++）
{
lx=（敌人[i].x>0）？敌人[i].x:0；
ly=（敌人[i].y>0）？敌人[i].y:0；
enemyCtx.clearRect（lx，
嗯,，
lx+敌人[i]。宽度+1，
ly+敌人[i]，身高+1）；
}
// ...
}

宽度的附加值1用于在擦除图像时停止画布绘制图像的最后一个像素列。希望这有帮助

function update()
{
    for (var i = 0; i < enemies.length; i++)
    {
        lx = (enemies[i].x > 0) ? enemies[i].x : 0;
        ly = (enemies[i].y > 0) ? enemies[i].y : 0;
        enemyCtx.clearRect( lx,
                            ly,
                            lx + enemies[i].width + 1,
                            ly + enemies[i].height + 1);
    }
    // ...
}