是否可以使用鼠标动态创建`html5 canvas'？

问题描述：

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

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

3小时我在互联网上搜索一个演示，我什么都没有发现可能性。

*'“然后将内容加载到不同的画布上。”*你能详细说明吗？ – 2015-03-13 13:29:26

答

您可以在鼠标位置

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卡恩（CAN0，CAN1，卡恩）

如果我们在数字键盘法新社0（48键代码），我填的画布可以（48-48）= CAN0

这ofcourse只工作到9，但它确实证明它可以（VAS）来完成

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

谢谢你，加载内容的意思是，我想加载画布和/或视频画布内动态创建 – Pixelight 2015-03-15 17:49:44

答

我不能说这是肯定的，因为我从来没有尝试过，但你可以看看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>

这使你拖动的开始和结束位置，然后你可以追加一个基于这些坐标的具有某种绝对定位的画布元素。希望这可以帮助！

是否可以使用鼠标动态创建`html5 canvas'？

相关推荐