是否可以使用鼠標動態創建`html5 canvas'？

Question

是否可以使用鼠標動態創建HTML5 canvas？

例如：我想用我的鼠標繪製HTML5畫布，然後將內容加載到不同的畫布中。

3小時我在互聯網上搜索一個演示，我什麼都沒有發現可能性。

Answer 1

您可以在鼠標位置

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

如果我們在數字鍵盤法新社0（48鍵代碼），我填的畫布可以（48-48）= CAN0

這ofcourse只工作到9，但它確實證明它可以（VAS）來完成

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

Answer 2

我不能說這是肯定的，因爲我從來沒有嘗試過，但你可以看看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>

這使你拖動的開始和結束位置，然後你可以追加一個基於這些座標的具有某種絕對定位的畫布元素。希望這可以幫助！