我如何從文件夾中調用圖像以及如何使用畫布（javascript）繪制圖像？

Question

我想在javascript中用canvas繪制圖像文件，但我不知道為什么它不起作用。

這是我調用它的步驟。

1. 設置 canvas object

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

2. 索引圖像並推送到imgArray並使用 function 自動添加圖像

    //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 添加 window 事件以在 window 加載時繪制圖像

    //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]); 我推送圖像的數組，控制台 window 返回“未定義”我不知道原因。

謝謝你。

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>