如何在JavaScript中使用Clear Rect函数进行移动

我正在使用纯javascript制作一个游戏，clearRect函数无法正常工作，下面是代码：

//player's location
var playerX = 250;
var playerY = 325;
document.addEventListener('keydown', function(e) {
  if (e.key === 'w' && playerY >= borderW && movement === true) {
    playerY -= playerSpeed;
    //Clears the head of the Protagonist
    ctx.clearRect(playerX + 2.5, playerY + 2.5, 20, 20);
    //Clears the body of the protagonist
    ctx.clearRect(playerX + 5, playerY + 17.5, 15, 25);
    drawProtagonistFacingUp();
  }
  if (e.key == 'd' && playerX < borderD && movement === true) {
    playerX += playerSpeed;
    ctx.clearRect(playerX, playerY, -200, 200);
    drawProtagonistFacingRight();
  }
  if (e.key == 's' && playerY < borderS && movement === true) {
    playerY += playerSpeed;
    ctx.clearRect(playerX, playerY - 15, 200, 200);
    drawProtagonistFacingDown();
  }
  if (e.key == 'a' && playerX > borderA && movement === true) {
    playerX -= playerSpeed;
    ctx.clearRect(playerX, playerY, 200, 200);
    drawProtagonistFacingLeft();
  }
});

//玩家的位置
var playerX=250；
var playerY=325；
文档.添加的事件列表器（'keydown'，函数（e）{
如果（e.key=='w'&&playerY>=borderW&&movement===true）{
playerY-=玩家速度；
//让主角清醒过来
ctx.clearRect（playerX+2.5，playerY+2.5,20,20）；
//清除主角的身体
ctx.clearRect（playerX+5，playerY+17.5,15,25）；
DrawProjectorFacingup（）；
}
如果（e.key='d'&&playerXborderA&&movement===true）{
playerX-=玩家速度；
clearRect（playerX，playerY，200200）；
DrawProjectorFacingleft（）；
}
});

当玩家按w、a、s或d移动时，会从屏幕上清除旧的玩家图像并绘制新的图像。然而，它现在所做的只是清除少量的玩家图像。如果可能，一个简单的解决方案会很有帮助。谢谢。

清理画布。 使用画布设置动画的方式是设置一个主动画循环函数，该函数由

requestAnimationFrame

function update(time){ // requestAnimationFrame calls this function with the 
                       // argument time. Time is in ms (1/1000th second) but
                       // accurate to 1/1,000,000th second,  0.001ms

    ... your code
    requestAnimationFrame(update); // request the next frame
}
requestAnimationFrame(update); // start the animation

在标准设置下，浏览器每秒将调用该函数60次

与跟踪每个对象并清除它然后重新渲染它相比，清除整个画布要简单得多。这可以通过几种方式实现

function update(time){ 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); // Make all pixels
                                                           // transparent
    // or
    ctx.fillStyle = "black"; // can use solid colour, gradient, or pattern
    ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
    // or 
    // use a background image
    ctx.drawImage(backgroundImage,0,0,ctx.canvas.width,ctx.canvas.height);
    ... your code
    requestAnimationFrame(update); // request the next frame
}
requestAnimationFrame(update); // start the animation

---

画布清除后，可以按顺序渲染对象，最后一个对象将显示在之前绘制的对象上。这种方法大大简化了动画代码。

您确定要

playerX+2.5

？不管出于什么目的，像素只存在于整数位置，而不是浮点位置。@MikeC，你是什么意思，如果我只是傻了，我真的很抱歉。我是一个非常业余的开发人员，所以我对javascript的了解不是最好的。播放器的尺寸是多少？@mm759，哎呀，我忘了添加它，我会编辑它now@Meeeeee我的意思是，你只会在

0,0

，

100325

等处有像素，而不是

1.5,2.2

，

100.4325.5

等。