如何从 PC 上传图像并将其绘制到画布上？ [复制]

Question

基本上标题是我的问题。我没有要显示的代码（我不知道从哪里开始），所有这些都需要在纯 javascript 中。

Answer 1

查找 drawImage 函数（我推荐 w3schools）。

在您的 javascript 中，您首先需要获取画布

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

还有画布的上下文

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