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

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

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

如何重绘矩形？

1 个答案: