javascript - 如何重画矩形？

Question

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

$(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();
});

Answer 1

您需要添加两件事才能使其按预期工作。首先，您需要从 Update 函数调用 Render。其次，您需要在重新绘制矩形之前清除 Canvas 。

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);
}