Question

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

Answer 1

查找drawImage功能（我推荐w3schools）。

在你的javascript中，你首先需要获得画布

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

然后是画布的上下文

context.drawImage(image, xPos, Ypos);

上下文是你想要调用drawImage函数的。

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

您在drawImage中传递的图像应以这种方式加载：

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

我的方式如下：

{{1}}

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

1 个答案: