如何在画布中绘制图像

Question

所以我试图在画布上绘制一个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)
  }
}

将 Thx 编辑为 mhkanfer“对不起，如果名称错误”我修复了它

Answer 1

你大部分是对的，尽管他们是几件事：

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

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

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

}