在画布上绘制图像。

Question

我正在尝试将一张图片放置在画布上。我阅读了以下教程https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images，并尝试做类似的事情。我的画布是<canvas id="canvas" width="400" height="400"></canvas>，我创建了如下函数：

  function putImage(){
         var img = new Image();
         img.src = "./path.png"; 
         var ctx = document.getElementById('canvas').getContext('2d');
         ctx.drawImage(img,8,8);            
  }

但是图片没有出现在画布上。 我已经打印了图片路径，路径正确，因此我能够排除这个问题。 有什么建议吗？ 谢谢。

- Quantico

---

你确定图片路径正确吗？在开发者控制台/火狐浏览器的控制台中有出现任何错误吗？ - Hass

是的，我100%确定我已经将其打印到控制台上了，并且这是正确的路径"./dir/image.png"。控制台中没有任何错误。 - Quantico

Answer 1

根据教程，你应该将 ctx.drawImage() 包裹在 img.onload 中，像这样：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = '/files/4531/backdrop.png';
}

我希望这可以帮到你。

- Hass

---

为了阐明为什么你需要这样做：当你设置图像的 .src 属性时，程序会向服务器请求图像，但程序不会等待图像加载完成。它会继续运行，当遇到 ctx.drawImage 方法调用需要尚未加载的图像时，它会忽略此调用。 - Philipp

这就是为什么你必须等待图像加载完成，然后给它一个回调函数，该函数在图像加载完成后绘制图像。 - Justin

Answer 2

补充Hass的回答：如果你不喜欢使用onload方法，你可以使用await一个Promise，像这样：

async function draw() {
  let ctx = document.getElementById("canvas").getContext('2d');
  let url = "https://example.com/image.png";
  let img = new Image();
  await new Promise(r => img.onload=r, img.src=url);
  ctx.drawImage(img, 0, 0);
}

- joe

Answer 3

如果您不喜欢使用Promise或onload，您也可以使用EventListener：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.addEventListener('load', function(){
    ctx.drawImage(img, 0, 0);
  });
  img.src = '/files/4531/backdrop.png';
}

- Paweł Moskal