如何在 canvas 中绘制图像

Question

所以我试图在 canvas 中绘制一个 img 我尝试了所有方法但在控制台中它显示 img is not a property 或类似的东西我不记得了所以任何人都可以帮助？这是js

function setupcanvas() {
  var canvas = document.querySelector('canvas')
  var c = canvas.getContext("2d")
  c.beginPath();
  var img = new image()
  img.src = "flappy_bird_bird.png"
  img.onload = function(){
    c.drawImage(img, 100, 100)
  }
}

编辑感谢 mhkanfer，“如果名称错误，抱歉”，我已修复它

Answer 1

你基本上是对的，尽管有两点：

确保 Image() 大写
确保您的图像 src 文件实际存在于该目录中
并确保你的 canvas 有宽度和高度，如果你没有在任何地方指定，你 canvas 将不会显示

如果您要修改它，它将看起来像：

function setupcanvas() {

  var canvas = document.querySelector('canvas')
  var c = canvas.getContext("2d")

  canvas.width = canvas.height = 200;

  var img = new Image()
  img.src = "example.png"

  img.onload = function(){
    c.drawImage(img, 0, 0)
  }

}

如何在 canvas 中绘制图像

How to draw an image in a canvas

javascript

canvas