如何从我的电脑上传图像并将其绘制到画布上？

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