javascript - html5 Canvas 图像落后于其他绘制的对象

Question

我正在创建一个 html5 canvas 游戏，主要思想是每个动画都有一个循环，在每一帧中重绘我 Canvas 上的所有内容。 由于某种原因，绘制的对象没有按照我希望的顺序出现。我首先想要背景图像，然后是一个矩形，最后是另一个图像显示在彼此之上。但是，矩形挡住了第二个图像的 View 而不是其他方式。

我的相关代码:

function playerdraw(p){ 
ctx.rect(p.x,p.y,100,150);
ctx.stroke();
//irrelevant stuff here...
ctx.drawImage(p.im,p.x,p.y+25,100,100);
}

我在 window.onload 上运行整个程序，因此图像加载应该不是问题。 为什么会这样？

Answer 1

(因为您没有提供足够的代码，我认为这可能是问题所在。)

每次运行 playerdraw() 函数时都需要重新绘制背景图像(如果每次都清除整个 Canvas )。所以，下面的代码应该可以工作:

function playerdraw(p) {
    // clear entire canvas
    ctx.clearRect(...);
    // draw background image
    ctx.drawImage(...);
    // draw rectangle
    ctx.rect(p.x, p.y, 100, 150);
    ctx.stroke();
    // irrelevant stuff here...
    // draw other image
    ctx.drawImage(p.im, p.x, p.y + 25, 100, 100);
}

注意:您需要在一开始就清除整个 Canvas (如果您这样做的话)。还有一种可能是您正在做某种 Canvas 翻译 或缩放 的事情，如果以错误的顺序进行，事情可能会变得一团糟。