Javascript 如何在使用clearRect更新新分数时清除分数？

我正在使用JavaScript创建一个蛇游戏，我可以在吃了食物后增加蛇的数量，并显示“分数：0”，但当分数更新时，它会在更新的分数上保持0

我使用了clearRect和cleartext方法，在绘制的分数之上和之下

我已经在它自己的函数中创建了drawScore，并使用clearRect（0,0，canvas.width，canvas.height）方法调用了该函数

函数drawerything（）{
const ctx=document.getElementById（“gameCanvas”）.getContext（“2d”）；
ctx.fillStyle=“#2a2a2a”；
ctx.fillRect（0,50，gameCanvas.width，gameCanvas.height）；
ctx.strokeStyle=“白色”；
ctx.strokeRect（0,50，gameCanvas.width，gameCanvas.height）；
//画蛇
for（设i=0；i

这里是代码笔的链接

---

您已经得到了解决方案ctx.clearRect（“将分数坐标放在这里”）

然而，这很可能只会留下一个空白的正方形来表示画布的颜色。 要解决这个问题，只需在使用clear rect后再次绘制背景和播放器

---

这是一种有点便宜的方法，但对我来说总是有效的

您似乎已经知道解决方案--

clearRect

--但是您没有在代码中的任何地方使用它。是的，但是当我使用它时，分数完全消失了。我想知道我是否遗漏了什么，可能是clearRect所在的位置？如果它导致文本消失，你可能在绘制文本后使用它--你应该先清除该区域。

function drawEverything() {
    const ctx = document.getElementById("gameCanvas").getContext('2d');            

    ctx.fillStyle = "#2a2a2a";
    ctx.fillRect(0, 50, gameCanvas.width, gameCanvas.height);
    ctx.strokeStyle = "white";
    ctx.strokeRect(0, 50, gameCanvas.width, gameCanvas.height);

    //draws snake
    for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = (i == 0) ? "red" : "white";
        ctx.fillRect(snake[i].x, snake[i].y +4.66, pixel, pixel);

        ctx.strokeStyle = (i ==0) ? "white" : "black";
        ctx.strokeRect(snake[i].x, snake[i].y +4.66, pixel, pixel);
    }

    //draws apple
    ctx.fillStyle = 'green';
    ctx.beginPath();
    ctx.arc(apple.x +7.5, apple.y +11, 5, 0, Math.PI * 2, true);
    ctx.fill();

    //old snake head
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;


    //moves snake according to which direction the user initiates
    if (snakeDirection == "LEFT") snakeX -= pixel;
    if (snakeDirection == "UP") snakeY -= pixel;
    if (snakeDirection == "RIGHT") snakeX += pixel;
    if (snakeDirection == "DOWN") snakeY += pixel;

    if (snakeX == apple.x && snakeY == apple.y) {
        score++;
        apple = {
            x: Math.floor(Math.random() * 40) * pixel,
            y: Math.floor(Math.random() * 33 + 3.66) * pixel
        }
    } else {
        //remove the tail
        snake.pop();
    }

    //new head creation
    let newHead = {
        x: snakeX,
        y: snakeY
    }

    //creates the new head
    snake.unshift(newHead);

    //draws score
        ctx.fillStyle = "green";
        ctx.font = "30px arial";
        ctx.fillText(scoreText + score, 3 * pixel, 2.3 * pixel);

}