我正在使用 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();
});
最佳答案
您需要添加两件事才能使其按预期工作。首先,您需要从 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);
}
关于javascript - 如何重画矩形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26892137/