Question

我正在创建一个html5画布游戏，主要思想是每个动画都有一个循环，可以在每一帧中重绘画布上的所有内容。由于某种原因，绘制的对象不按我想要的顺序出现。我首先想要背景图像，然后是一个矩形，最后是另一个要在彼此之上显示的图像。但是，矩形阻挡了第二个图像的视图，而不是相反。

我的相关代码：

       <value>2
0</value>

我在window.onload上运行整个事情，所以图像加载不是问题。为什么会这样？

Answer 1

（因为您还没有提供足够的代码，我认为这可能是问题。）

每次运行playerdraw()函数时，您都需要重新绘制背景图像（如果您每次都清除整个画布）。因此，以下代码应该可以工作：

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);
}

注意：您需要在开始时清除整个画布（如果您正在这样做）。还有一种可能性，你正在做某种画布翻译或缩放的东西，如果按错误的顺序完成，事情会变得很混乱起来。

Answer 2

我现在知道我的问题是什么。我忘了添加

 ctx.beginPath();

在我的代码中。我一次又一次地调用我的函数，然后我想要绘制更多的矩形。我觉得很傻。

html5 canvas img落后于其他绘制的对象

2 个答案: