时间戳

首页 > 解决方案 > 如何在画布中绘制图像

javascript - 如何在画布中绘制图像

问题描述

所以我试图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 “对不起，如果名称错误”我修复了它

标签： javascriptcanvas

解决方案

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

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

}

推荐阅读