我正在尝试在html的canvas元素上构建一个迷你游戏。即使我使用带有透明背景的Spritesheets为角色制作了动画，当他们移动时，它们也会将所有内容隐藏在它们后面，就像它们的背景为矩形一样。
起初，我认为这与clearRect函数有关，但是即使我们删除它只是为了进行检查，它仍然会继续发生。
//Here we do the animations
function drawImage(){
updateFrame();
document.getElementById( 'progress2').value+=1;
if (Store == 68){
left = 0;
ctx.clearRect(x,y,width,height);
ctx.drawImage(HaraldRight,srcX,srcY,width,height,x,y,width,height);
//not trespassing the vertical bars system
if (x + width < canWidth )
{
x=x+15;
}
}
else if (Store == 65){
left = 1;
ctx.clearRect(x,y,width,height);
ctx.drawImage(HaraldLeft,srcX,srcY,width,height,x,y,width,height);
//not trespassing the vertical bars system
if (x+width<=1){
x=0;
}
else
{
x=x-15;
}
}
else if (Store == 87){
left = 0;
ctx.drawImage(HaraldRightJump,srcX,srcY,width,height,x,y,width,height);
document.getElementById( 'progress2').value-=2;
}
else if (Store == 74){
left = 0;
ctx.drawImage(HaraldRightAttack,srcX,srcY,width,height,x,y,width,height);
document.getElementById( 'progress2').value-=2;
if (document.getElementById( 'progress').value>0){
if (document.getElementById( 'progress2').value==0)
{
alert('You have no stamina, you lose 10 HP as penalty')
document.getElementById( 'progress').value-=10;
}
}
}
else if (Store == 83){
left = 0;
ctx.drawImage(HaraldShield,srcX,srcY,width,height,x,y,width,height);
document.getElementById( 'progress2').value-=3;
document.getElementById( 'progress2').value+=2;
}
else
{
if (left!=1){
ctx.clearRect(x,y,width,height);
ctx.drawImage(HaraldStandRight,srcX,srcY,width,height,x,y,width,height);
}
else
{
ctx.drawImage(HaraldLeftStand,srcX,srcY,width,height,x,y,width,height);
}
}
Store = 0;
}
//looping the sprite
setInterval(function(){
var Harald = drawImage();
},100);
