时间戳

首页 > 解决方案 > 在画布上绘制多个图像/预加载图像

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

问题描述

我正在尝试使用以下代码从我的页面上的 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:

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

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

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

安慰：

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

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

谢谢

标签： javascriptcanvasdrawimage

解决方案

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

如此处所建议：预加载图像的功能 - 现在需要绘制它们，但是如何？

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

推荐阅读