如何在每个Canvas DrawImage的forEach循环内添加自定义位置？
我正在尝试使用Canvas DrawImages显示多个图像，每个图像都有一个唯一的位置。我创建了一个包含多个图像的数组，我想将它们放置在画布上的不同部分上。
现在，所有画布图像都相互堆叠。
这是我的JS：
(() => { // Canvas Setup let canvas = document.getElementById('hedoneCanvas'); let context = canvas.getContext('2d');
// // Canvas Images
let imageSources = [
'https://images.pexels.com/photos/1313267/pexels-photo-1313267.jpeg?cs=srgb&dl=food-fruit-green-1313267.jpg&fm=jpg',
'https://images.pexels.com/photos/2965413/pexels-photo-2965413.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://images.pexels.com/photos/2196602/pexels-photo-2196602.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://images.pexels.com/photos/2955490/pexels-photo-2955490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
];
// Canvas Size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const loadImage = imagePath => {
return new Promise((resolve, reject) => {
let image = new Image();
image.addEventListener('load', () => {
resolve(image);
});
image.addEventListener('error', err => {
reject(err);
});
image.src = imagePath;
});
};
const canvasOnResize = () => {
canvas.width = window.innerWidth;
canvas.style.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.height = window.innerHeight;
};
window.addEventListener('resize', canvasOnResize);
Promise.all(imageSources.map(i => loadImage(i)))
.then(images => {
images.forEach(image => {
console.log(context);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
});
})
.catch(err => {
console.error(err);
});
})(); 我也想让他们响应我该如何存档？
我在Codepen上有演示： https ://codepen.io/Merdzanovich/pen/dybLQqL
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
为了在画布上以不同的位置显示多个图像而不是相互堆叠，您需要为每个图像指定绘制位置。这通常通过使用drawImage()方法并传递适当的坐标来完成。您的代码中似乎缺少了实际加载图像和绘制它们到特定位置的逻辑。下面是一个示例代码，展示了如何遍历图像源数组，加载每个图像，并在画布上指定的位置绘制它们：
(() => {
// Canvas Setup
let canvas = document.getElementById('hedoneCanvas');
let context = canvas.getContext('2d');
// Canvas Images
let imageSources = [
'https://images.pexels.com/photos/1313267/pexels-photo-1313267.jpeg?cs=srgb',
// 添加更多图像URL...
];
// 图像加载函数
function loadImage(url, callback) {
let img = new Image();
img.src = url;
img.onload = callback;
return img; // 返回图像对象以便稍后使用
}
// 绘制图像到指定位置
function drawImagesAtPositions(sources, positions) {
sources.forEach((src, index) => {
let img = loadImage(src, () => {
// 确保位置数组与图像源数组长度相同
if (positions && positions[index]) {
let [x, y] = positions[index];
context.drawImage(img, x, y);
} else {
console.warn(`缺少第${index + 1}个图像的位置信息`);
}
});
});
}
// 示例位置（请根据需要调整）
let imagePositions = [
{x: 50, y: 50}, // 第一个图像的位置
{x: 200, y: 100}, // 第二个图像的位置
// 添加更多位置...
];
// 调用函数绘制图像
drawImagesAtPositions(imageSources, imagePositions);
})();
这段代码首先定义了一个loadImage函数来异步加载图像，然后定义了一个drawImagesAtPositions函数来遍历图像源和它们对应的位置，并调用drawImage方法将它们绘制到画布上。请确保imagePositions数组中的位置与您的需求相匹配，且数量与imageSources数组中的图像数量一致。
这样，每个图像就会按照您指定的位置而非堆叠方式显示在画布上了。
