我怎样才能让我在 Canvas 中的两个图像不会相互擦除？

Posted 2023-03-25

【中文标题】我怎样才能让我在 Canvas 中的两个图像不会相互擦除？

【英文标题】：How can I get my two images in Canvas not erasing each other?

【发布时间】：2019-08-26 03:03:07

【问题描述】：

我正在尝试使用 html 和 JS 在 Canvas 中设置小游戏。我遇到了一个问题，但我不明白我错过了什么。

我在画布中绘制了两张精灵表，但是当它们彼此靠近时，我的drawloop底部的一张会擦除另一张。

我导入我的 srpites，绘制它们并为其设置动画，然后使用 setTimeout 在 drawloop 中调用所有内容以降低动画速度

function drawArthur() 
    updateFrame();
    animations();
    resetAnimations();
    context.drawImage(arthurImage, arthur.srcX, arthur.srcY, arthur.width, arthur.height, arthur.x, arthur.y, arthur.width, arthur.height);
    arthurImage.style.zIndex = '1';

function updateFrame() 
    arthur.currentFrame = ++arthur.currentFrame % arthur.colums;
    arthur.srcX = arthur.currentFrame * arthur.width;
    arthur.srcY = 0;
    context.clearRect(arthur.x, arthur.y, arthur.width, arthur.height);

    // if (myModule.newZombie.isCrashed) 
    //     arthur.die = true;
    //     console.log(arthur.die);
    // 

function animations() 
    arthur.srcX = arthur.currentFrame * arthur.width;
    if (arthur.goRight) 
        arthur.srcY = arthur.goRowRight * arthur.height;
     else if (arthur.goLeft) 
        arthur.srcY = arthur.goRowLeft * arthur.height;
     else if (arthur.duckRight) 
        arthur.srcY = arthur.duckRowRight * arthur.height;
     else if (arthur.atkRight) 
        arthur.srcY = arthur.atkRowRight * arthur.height;
        if (zombie.x < 274 && zombie.x > 262) 
            console.log('killllll');
            zombie.dieRight = true;
         else if (zombie.x < 262) 
            zombie.dieRight = false;
            zombie.x = -50;
         else if (arthur.jumpRight) 
            arthur.srcY = arthur.jumpRowRight * arthur.height;
        
    

// function that reset all states every time in the draw loop to set the states at the origin state
function resetAnimations() 
    arthur.stand = arthur.right;
    arthur.goLeft = false;
    arthur.goRight = false;
    arthur.duckRight = false;
    arthur.atkRight = false;
    arthur.jumpRight = false;

function drawLoop() 
    setTimeout(function () 
        context.clearRect(0, 0, theCanvas.width, theCanvas.height);
        drawArthur();
        drawZombie();
        requestAnimationFrame(function () 
            drawLoop();
        );
    , 150);
    createNewZombie();
    console.log(allZombies);

我不能管理两个让我的两个角色，只是相互重叠。 drawloop 中的最后一个，这里是僵尸，当亚瑟从他身边经过时，他会抹去他。

谢谢！

【问题讨论】：

你的 drawZombie() 方法是否类似于 drawArthur() ？你没有发布它

嘿，不，我不想在这里放太多代码。是一样的。

【参考方案1】：

假设您的drawZombie 方法也调用了类似的updateFrame() 方法， 并且它也有像context.clearRect(arthur.x, arthur.y, arthur.width, arthur.height);这样的一行

发生了什么是你

1) 清除亚瑟身后的区域

2) 画亚瑟

3) 清除僵尸后面的区域即使亚瑟在僵尸后面

4) 画僵尸

因为您正在使用 context.clearRect(0, 0, theCanvas.width, theCanvas.height); 清除 drawLoop 中的整个画布，所以您不需要执行 (1) 和 (3)。

从updateFrame 方法中删除context.clearRect(...)。

或

如果您确实想要这些额外的clearRect(...)，请确保它们都发生在您绘制亚瑟和僵尸之前

希望对你有帮助