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

问题描述

我正在尝试使用以下代码从页面上的 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 绘制在badge2 上方，缓冲区空间为 5 像素。

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

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

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

控制台：

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

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

谢谢

解决方法

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

按照此处的建议：A function to preload images - need to draw them now,but how?

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

canvas drawimage javascript