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);            
  }

但图片没有出现在画布上。我已经打印了图像路径并且它是正确的，所以我能够消除这个问题。有什么建议吗？

感谢

Answer 1

要添加到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);
}

Answer 2

如果您不喜欢使用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';
}

Answer 3

根据教程，你应该将你的ctx.drawImage（）包装在img.load中，如此

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
  };
  img.src = '/files/4531/backdrop.png';
}

我希望这会有所帮助。

在画布上绘制图像

3 个答案: