如何在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

关键思想是加载图像是异步的。下面的代码片段首先加载图像（通过创建一个在 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>

如何在canvas中放置一个图像的点？

How put over the dot a image, in a canvas?

javascript

canvas