Javascript 如何重新绘制矩形？

我正在使用javascript，我已经绘制了一个宽度设置为变量的矩形。当我增加或减少变量时，如何重新绘制矩形，而不是绘制一个具有更新变量宽度的新矩形？下面是一个示例，当我按下左箭头时，它将减少变量。我认为问题可能是我在Render函数中放入了fillRect代码，所以每次调用函数时它都会重新绘制。这可能是错误的，但我不知道如何纠正它。下面是一个示例代码

$(function(){
//START OF VARIABLES///////////////////////////////////

//INITIALISE CANVAS
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = (32*12);
canvas.height = (32*12);

//HANDLES KEYBOARD INPUT
var keysDown = {};

addEventListener("keydown", function (e) {
   keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
   delete keysDown[e.keyCode];
}, false);

var leftarrow = 37;
var uparrow = 38;
var rightarrow = 39;
var downarrow = 40;

//PLAYER VARIABLES
var health = 100

//END OF VARIABLES///////////////////////////////////// 

function Initalise(){
    Main();
}

function Update(modifier) {

    if(leftarrow in keysDown){
        health -= 1;   
    }
}

function Render(){
    ctx.fillStyle = "red";
    ctx.fillRect(80, 10, health, 10);
}

function Main() {
    var now = Date.now();
    var delta = now - then;

    Update(delta / 1000);
    Render();

    then = now;

    requestAnimationFrame(Main);
}

var then = Date.now();
Initalise();
});

---

您需要添加两件事才能使这项工作按预期进行。首先，需要从

Update

函数调用

Render

。其次，在重画矩形之前，需要清除画布

function Update(modifier) {
    if(leftarrow in keysDown){
        health -= 1;   
    }
    Render();
}

function Render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "red";
    ctx.fillRect(80, 10, health, 10);
}

---

一旦您绘制了一个矩形，就没有“矩形对象”可供您修改。这些像素已设置为矩形的新颜色。