如何在畫布中繪制圖像

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

}