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