如何從我的電腦上傳圖像並將其繪製到畫布上？

Question

基本上標題是我的問題。我沒有代碼顯示（我不知道從哪裏開始），所有這些都需要使用純JavaScript。

Answer 1

查找drawImage函數（我推薦w3schools）。

在JavaScript中，你首先需要獲得畫布

const canvas = document.getElementById("canvasID"); 

而且theb畫布

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

的情況下的背景是要呼籲drawImage方法是什麼。

context.drawImage(image, xPos, Ypos); 

您在的drawImage傳遞的圖像應該被加載這樣：

const image = new Image(); 
image.src = "path/image.jpg"; 
image.addEventListener('load',() => 
{ 
    context.drawImage(image, xPos, yPos); 
}); 

我會做的方式是如下：

window.addEventListener('load',() => 
{ 
    const canvas = document.getElementById("canvasID"); 
    const ctx = canvas.getContext("2d"); 
    const image = new Image(); 
    image.addEventListener('load',() => 
    { 
     ctx.drawImage(image, xPos, yPos); 
    }); 
});