html5 画布图像位于其他绘制对象的后面答案

【问题标题】：html5 canvas img goes behind other drawn objectshtml5 画布图像位于其他绘制对象的后面
【发布时间】：2017-07-12 22:48:36
【问题描述】：

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

我的相关代码：

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 上运行整个程序，因此图像加载应该不是问题。为什么会这样？

【问题讨论】：

标签： javascript html image canvas

【解决方案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);
}

注意：您需要从一开始就清除整个画布（如果您这样做的话）。还有一种可能是您正在做某种画布翻译或缩放的东西，如果按错误的顺序完成，事情可能会变得一团糟。

【讨论】：

【解决方案2】：

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

 ctx.beginPath();

在我的代码中。我一次又一次地调用我的函数，它绘制了比我想要的更多的矩形。我觉得好傻。

【讨论】：