在画布上绘制多个图像/预加载图像答案

【问题标题】：Draw multiple images on canvas / preload images在画布上绘制多个图像/预加载图像
【发布时间】：2021-01-29 20:54:55
【问题描述】：

我正在尝试使用以下代码从我的页面上的 2 个选择标签中提取 2 个图像：

<select id="badge1" class="badges" onchange="ReDraw()">
<option value="0001">1</option>
<option value="0002">2</option>
<option value="0003">3</option>
</select>
<select id="badge2" class="badges" onchange="ReDraw()">
<option value="0001">1</option>
<option value="0002">2</option>
<option value="0003">3</option>
</select>

let badge1Select = document.getElementById("badge1");
let badge2Select = document.getElementById("badge2");

在我的ReDraw():

let img2 = new Image();
img2.onload = () => {
 ctx.drawImage(img2, 175 - img2.width / 2, renderGroup[0][1] - img2.height -5);
};
let img1 = new Image();
img1.onload = () => {
 ctx.drawImage(img1, 175 - img1.width / 2, renderGroup[0][1] - img2.height -5 - img1.height);
};
img2.src = `Badges/${badge2Select.value}.png`;
img1.src = `Badges/${badge1Select.value}.png`;

renderGroup[0][1] 只是一个动态的Y-Coordinate，它会根据我的代码中的其他内容而变化。这部分工作正常。

My intention with this is that when 2 badges are selected, i'd like:

badge2 将绘制在renderGroup[0][1] 上方，缓冲空间为 5 像素。
badge1 用 5 个像素的缓冲区空间绘制在 badge2 上方。

我的问题： 是不是当我运行此代码并选择 2 个徽章时，这些徽章不是按预期绘制的。但是，如果我在选择上来回循环，它们将按预期正确地绘制在彼此之上。这太奇怪了，就像我第一次调用图像时，它没有正确绘制，但来回循环却......

我添加了一个小控制台日志来找出高度给我带来问题的原因：

console.log(img2.height);
console.log(img1.height);

控制台：

app.js:217 0
app.js:218 66

我希望我尽可能清楚和简洁地说明所有信息。我知道这与预加载图像有关，我只是不太明白。我知道这个问题的答案对某些人来说是微不足道的，但我浪费了很多令人尴尬的时间来试图弄清楚我正在求助于你们。

谢谢

【问题讨论】：

标签： javascript canvas drawimage

【解决方案1】：

原来答案一直摆在我面前：PxLoader http://thinkpixellab.com/pxloader/

这里建议：A function to preload images - need to draw them now, but how?

我仍然希望看到一个没有库的 VanillaJS 方法，但由于这个 PxLoader 是一个非常简单的解决方案，我将它视为解决方案。

【讨论】：