HTML canvas 不从文件中绘制图像

Question

我正在尝试从文件加载图像并将其绘制在 canvas 上。我有这个..

const canvas  = document.createElement("canvas");
const context = canvas.getContext("2d");

myImage = new Image();
myImage.src = "img/image.jpg";

context.drawImage(myImage, 0, 0, 100, 100);

这不是在屏幕上绘制任何东西，我哪里出错了？ 我可以看到开发人员工具正在加载图像，所以我知道它可以找到文件本身。

Answer 1

如果页面上已存在canvas元素，则需要将createElement方法替换为querySelector ：

// const canvas  = document.createElement("canvas");
const canvas  = document.querySelector("canvas");
const context = canvas.getContext("2d");

myImage = new Image();
myImage.src = "img/image.jpg";

myImage.addEventListener("load", ()=>{
  context.drawImage(myImage, 0, 0, 100, 100);
}); // Thanks to Xion 14 for the reminder!

否则，您需要将 append canvas 元素添加到 DOM，例如通过document.body.appendChild( canvas );