Javascript 可以用鼠标动态创建“html5画布”吗？

可以用鼠标动态创建HTML5画布吗

例如：我想使用鼠标绘制HTML5画布，然后将内容加载到不同的画布中

---

我在互联网上搜索了3个小时的演示，但没有找到任何关于这种可能性的信息。

我不能肯定这一点，因为我从未尝试过，但您可能会查看和事件。您可以创建一个元素，用户可以将其拖入其中并监听其中的事件，如下所示：

变量startX、startY、endX、endY； $‘拖动’ .mousedowne函数{ startX=e.pageX； startY=e.pageY； $'start'.textstartX+，+startY； } .鼠标功能{ endX=e.pageX； endY=e.pageY； $'end'.textendX+，+endY； }; 拖{ 宽度：100%； 高度：500px； }

---

您可以在鼠标位置上创建画布

但是加载内容是什么意思

编辑：动态内容

您可以给画布一个id，并使用该id在画布上绘制

在本例中，创建的画布id为canN can0、can1、canN

如果我们在numpad键48上按0，我填充画布can48-48=can0

这当然只适用于9，但它确实证明了这是可以做到的

---

然后将内容加载到不同的画布中。您能详细说明一下吗？谢谢，加载内容意味着，我想在动态创建的画布中加载图片和/或视频

document.onmousedown=mouseDown;
document.onmouseup=mouseUp;
var x1,y1;

function mouseDown(e){
    x1=e.clientX;
    y1=e.clientY;
}

function mouseUp(e){
    var can = document.createElement("CANVAS");
    can.style.position = "absolute";
    can.style.left = x1+"px";
    can.style.top = y1+"px";
    can.width=Math.abs(x1-e.clientX);
    can.height=Math.abs(y1-e.clientY);
    can.style.border="1px solid black"
    document.body.appendChild(can);
}