Javascript画布不重画？

我正在开发一个游戏（基于画布），并且遇到了问题。显然，当我按下一个键时，画布并没有更新对象的 x 和 y，它什么也没做。变量本身正在更新，但屏幕上的对象没有更新。这是代码：

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);

var bluex = 560;
var bluey = 380;

var orangex = 20;
var orangey = 380;

ctx.fillStyle = "black";
ctx.fillRect(0, 0, 640, 480);

ctx.fillStyle = "orange";
ctx.fillRect(orangex, orangey, 64, 64);

ctx.fillStyle = "blue";
ctx.fillRect(bluex, bluey, 64, 64);

function keyDownHandler(event) {
    var keyPressed = String.fromCharCode(event.keyCode);

    if (keyPressed == "W") {
        orangey = orangey - 5;
        bluey = bluey - 5;
    } else if (keyPressed == "D") {
        orangex = orangex + 5;
        bluex = bluex - 5;
    } else if (keyPressed == "S") {
        orangey = orangey + 5;
        bluey = bluey + 5;
    } else if (keyPressed == "A") {
        orangex = orangex - 5;
        bluex = bluex + 5;
    }
    alert(bluex + " " + bluey);
}

document.onkeydown = keyDownHandler;

有谁知道如何解决这一问题？抱歉，如果这是一个非常基本的代码问题。

将您的函数更改为以下内容：

function keyDownHandler(event) {
    var ctx = canvas.getContext("2d");
    var keyPressed = String.fromCharCode(event.keyCode);

    if (keyPressed == "W") {
        orangey = orangey - 5;
        bluey = bluey - 5;
    } else if (keyPressed == "D") {
        orangex = orangex + 5;
        bluex = bluex - 5;
    } else if (keyPressed == "S") {
        orangey = orangey + 5;
        bluey = bluey + 5;
    } else if (keyPressed == "A") {
        orangex = orangex - 5;
        bluex = bluex + 5;
    }
    ctx.fillStyle = "orange";
    ctx.fillRect(orangex, orangey, 64, 64);

    ctx.fillStyle = "blue";
    ctx.fillRect(bluex, bluey, 64, 64);
}

调用函数时，您的 ctx.fillStyle 没有被调用，但变量已更新