如何从文件夹中调用图像，以及如何使用画布(javascript)绘制图像

Question

我想在javascript中用canvas绘制图像文件，但我不知道为什么它不起作用。

以下是我的步骤。

1. 设置画布对象

{
imageSequence: [0, 5],
imgArray: [],
canvas: document.querySelector("#imgadd"),
context: document.querySelector("#imgadd").getContext("2d")     

}

2. 索引图像并推送到imgArray，并使用功能自动添加图像

//image indexing
let sequence = Math.round(sceneInfo[0].imageSequence)

//img add function
function addImage() {
let imgadd;
for (let i = 1; i < 7; i++) {
imgadd = new Image();
imgadd.src = `./img/${i}.jpg`;
sceneInfo[0].imgArray.push(imgadd.src);
}
}
addImage()

3添加窗口事件以在窗口加载时绘制图像

//when window load call function
window.addEventListener('onload', () => {
sceneInfo[0].context.drawImage(sceneInfo[0].imgArray[sequence], 0, 0);
})

这是我的全部代码(设置匿名功能)

(() => {
//canvas setting 
const sceneInfo = [{
imageSequence: [0, 5],
imgArray: [],
canvas: document.querySelector("#imgadd"),
context: document.querySelector("#imgadd").getContext("2d")
}];
//image indexing
let sequence = Math.round(sceneInfo[0].imageSequence)
//img add function
function addImage() {
let imgadd;
for (let i = 1; i < 7; i++) {
imgadd = new Image();
imgadd.src = `./img/${i}.jpg`;
sceneInfo[0].imgArray.push(imgadd.src);
}
}
addImage();
//when window load call function
window.addEventListener('load', (e) => {
sceneInfo[0].context.drawImage(sceneInfo[0].imgArray[sequence], 0, 0);
})
console.log(sceneInfo[0].imgArray[sequence]);
})();

<canvas id="imgadd"></anvas>

我想知道当我console.log(sceneInfo[0].imgArray[sequence]);我推送图像的数组，控制台窗口返回"未定义"我不知道原因。

谢谢。

Answer 1

您的imageSequence是一个数组，对于一个数组没有Math.round，这将给出NaN

const sceneInfo = [{
imageSequence: [0, 5]
}];
let sequence = Math.round(sceneInfo[0].imageSequence)
console.log(sceneInfo[0].imageSequence);
console.log(sequence);

---

我不知道为什么那个复杂的sceneInfo对象
但这是我尝试完全绘制图像并使代码与原始代码保持接近。

(() => {
//canvas setting 
const sceneInfo = [{
imageSequence: [0, 5],
imgArray: [],
canvas: document.querySelector("#imgadd"),
context: document.querySelector("#imgadd").getContext("2d")
}];
//img add function
function addImage() {
let imgadd;
for (let i = 1; i < 7; i++) {
let imgadd = new Image();
sceneInfo[0].imgArray.push(imgadd);
imgadd.onload = () => {
sceneInfo[0].context.drawImage(sceneInfo[0].imgArray[i-1], i*40, i*10);
console.log(sceneInfo[0].imgArray[i-1].src)
};
imgadd.src = `http://swagger-net-test.azurewebsites.net/api/Image/?${i}`;
}
}
addImage();
})();

<canvas id="imgadd" width=600></canvas>