如何在 canvas 中添加圖像？

Question

如何在每個對象中放置圖像？

目前只有它的顯示點，但我需要顯示圖像

for (var i = 0; i < objects.length; i++) {
        var object = objects[i];
        object.y += spawnRateOfDescent;
        ctx.beginPath();
        ctx.arc(object.x, object.y, 8, 0, Math.PI * 2);


       


        ctx.closePath();
        ctx.fillStyle = object.type;
        ctx.fill();
    }

我試過這個

var img = new Image();
    img.src = "img/HannyahNED/Cohete_1"+".png";
    img.onload = function () {
        ctx.drawImage(img, object.x, object.y);
    };

但不起作用

Answer 1

關鍵思想是加載圖像是異步的。 下面的代碼片段首先加載圖像（通過創建一個 promise 來解決image.onload完成）。

之后，您的代碼工作正常。

 const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') const objects = [{ x: 10, y: 10, src: "https://via.placeholder.com/60/FF0000" // red image }, { x: 90, y: 90, src: "https://via.placeholder.com/60/00FF00" // green image }, { x: 170, y: 170, src: "https://via.placeholder.com/60/0000FF" // blue image } ] function fetchImage(url) { return new Promise(resolve => { const img = new Image(); img.src = url; img.onload = () => resolve(img); }); } const promises = objects.map(object => { return fetchImage(object.src).then(img => object.img = img) }); Promise.all(promises).then(() => { objects.forEach(object => { ctx.drawImage(object.img, object.x, object.y); ctx.beginPath(); ctx.arc(object.x, object.y, 8, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); }); })

 <div> <canvas width="400" height="400"></canvas> </div>