在 canvas 上繪制多個圖像/預加載圖像

Question

我正在嘗試使用以下代碼在我的頁面上繪制從 2 個 select 標簽中提取的 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 像素的緩沖空間。

我的問題是：當我運行此代碼和 select 2 個徽章時，徽章不是按預期繪制在彼此之上的。 但是，如果我在 select 上來回循環，它們將按預期正確繪制在彼此之上。 太奇怪了，就像我第一次調用圖像一樣，它沒有正確繪制但來回循環確實......

我添加了一個小的控制台日志來找出高度給我帶來問題的原因：

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

安慰：

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

我希望我盡可能把所有的信息都說清楚並簡明扼要。 我知道這與預加載圖像有關，我只是不太明白。 我知道這個問題的答案對某些人來說是微不足道的，但我浪費了很多令人尷尬的時間試圖弄清楚我正在求助於你們。

謝謝

Answer 1

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

如此處所建議： A function 預加載圖像 - 現在需要繪制它們，但是如何繪制？

我仍然希望看到沒有庫的 VanillaJS 方法，但是由於這個 PxLoader 是一個非常簡單的修復程序，我將只考慮它的解決方案。