清除 Javascript 中的 drawImage() 函数

Question

如何让 canvas 清除之前的图像，让我的角色看起来像是在移动？现在，它正在显示我的角色在屏幕上移动时的每一个动画。我在下面贴了一张图片。

这是我的 Javascript

function update(){
var imageObj = new Image();
if(fr1){
imageObj.src = 'https://i.ibb.co/yhbRD1R/Mega1.png';
}

if(fr2){
imageObj.src = 'https://i.ibb.co/S74hLKX/Mega2.png';
}
if(fr3){
imageObj.src = 'https://i.ibb.co/tC1j7wC/Mega3.png';
}
if(fr4){
imageObj.src = 'https://i.ibb.co/Tr2cqH9/Mega4.png';
}
if(fr5){
imageObj.src = 'https://i.ibb.co/jvr49xx/Mega5.png';
}

if(fr6){
imageObj.src = 'https://i.ibb.co/BrQnPNR/Mega6.png';
}
if(fr7){
imageObj.src = 'https://i.ibb.co/CJdzqGR/Mega7.png';
}
if(fr8){
imageObj.src = 'https://i.ibb.co/frbN0Dj/Mega8.png';
}
if(fr9){
imageObj.src = 'https://i.ibb.co/RjLL6z1/Mega9.png';
}
if(fr10){
imageObj.src = 'https://i.ibb.co/2ypxYjw/Mega10.png';
}
var canvas= document.getElementById('canvas');
var context = canvas.getContext('2d');

image1.style.visibility="hidden";
imageObj.onload = function() {

context.drawImage(imageObj,mainx,mainy,100,100);
};

}

情况如下：

Answer 1

尝试将 context.clearRect(0, 0, canvas.width, canvas.height); 放在 context.drawImage(imageObj,mainx,mainy,100,100); 之前。

Answer 2

您可以在每次加载新图像时使用 context.clearRect(x, y, width, height)。此外，我通过将所有动画精灵放入一个数组，然后使用 select 使用 frameCount % frames.length 对给定帧进行 select 来稍微简化您的代码。这里 frameCount 是一个变量，它在每个游戏循环中递增（每次 setInterval 运行）。因此，使用模运算符 % 您可以将数字限制在数组的 0 和 length 之间，从而允许您 select 从 frames 每次循环运行时的数组。

请参阅下面的工作示例：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var mainx = 0;
var mainy = canvas.height/2;

var frames = ['https://i.ibb.co/yhbRD1R/Mega1.png',
'https://i.ibb.co/S74hLKX/Mega2.png',
'https://i.ibb.co/tC1j7wC/Mega3.png',
'https://i.ibb.co/Tr2cqH9/Mega4.png',
'https://i.ibb.co/jvr49xx/Mega5.png',
'https://i.ibb.co/BrQnPNR/Mega6.png',
'https://i.ibb.co/CJdzqGR/Mega7.png',
'https://i.ibb.co/frbN0Dj/Mega8.png',
'https://i.ibb.co/RjLL6z1/Mega9.png',
'https://i.ibb.co/2ypxYjw/Mega10.png'];

function update(fr) {
  var imageObj = new Image();
  imageObj.src = frames[fr];
  
  imageObj.onload = function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(imageObj, mainx, mainy, 100, 100);
  };
  
  mainx = (mainx + 10) % canvas.width; // update position of character
  frameCount += 1; // update frame count to move to next image frame
}

var frameCount = 0;
setInterval(function() {
  update(frameCount % frames.length);
}, 100)

<canvas id="canvas" height="200" width="500" style="border: 1px solid black;"></canvas>

清除 Javascript 中的 drawImage() 函数

Clearing drawImage() function in Javascript

html

javascript

css

canvas

drawimage