是否有任何链接或教程可以使图像可拖动并克隆到 html 画布中？我总是找到绘制线条或画笔的教程，但是有没有办法专门拖动图像并将其克隆到画布上？
例如：我的工具栏中有一个图像，我想将该图像克隆到画布，因此我将工具栏中的图像拖动到画布并在画布中创建该图像
我已经使用了关键字，例如将图像拖到 html 画布或在画布中绘制图像，但它专门从目录而不是 html 本身绘制一个图像
信息：我的图像就像形状，但不像矩形或圆形那么简单，而是像节点或图标
我想您可能正在寻找拖放 API。 https://www.w3schools.com/html/html5_draganddrop.asp
我在这里编写了一个快速演示，您可以将图像元素拖动到画布元素上，然后将图像绘制到画布上。
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
border: 2px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
const id = ev.dataTransfer.getData("text");
const draggedEl = document.getElementById(id);
const canvas = ev.target;
if (draggedEl.tagName === "IMG") {
canvas.width = draggedEl.width;
canvas.height = draggedEl.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(draggedEl, 0, 0);
draggedEl.style.display = "none";
}
}
</script>
</head>
<body>
<p>Drag the image onto the canvas:</p>
<canvas id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></canvas>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>