是否可以使用鼠标动态创建“ html5 canvas”？

Question

是否可以使用鼠标动态创建HTML5 canvas ？

例如：我想用鼠标绘制HTML5画布，然后将内容加载到其他画布中。

3小时后，我在互联网上搜索了一个演示，但没有发现这种可能性。

Answer 1

我无法肯定地说出这一点，因为我从未尝试过，但是您可能会研究mousedown和mouseup事件。 您可以创建一个元素，用户可以将其拖入并监听其上的那些事件，如下所示：

 var startX, startY, endX, endY; $('#drag') .mousedown(function(e) { startX = e.pageX; startY = e.pageY; $('#start').text(startX + ", " + startY); }) .mouseup(function(e) { endX = e.pageX; endY = e.pageY; $('#end').text(endX + ", " + endY); }); 

 #drag { width: 100%; height: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="start"></div> <div id="end"></div> <div id="drag"></div> 

这样就可以指定拖动的开始和结束位置，然后可以基于这些坐标在画布元素上添加一些绝对位置。 希望这可以帮助！

Answer 2

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

http://jsfiddle.net/v4nm487b/

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

但是，加载内容是什么意思？

编辑：动态内容

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

在此示例中，创建的画布的ID为canN（can0，can1，canN）

如果我们在数字键盘上按0（键码48），则我将can（48-48）= can0填满

当然这最多只能工作9次，但确实可以做到

http://jsfiddle.net/v4nm487b/6/