[英]Is it possible to create `html5 canvas` dynamically with the mouse?
是否可以使用鼠標動態創建HTML5 canvas
?
例如:我想用鼠標繪制HTML5畫布,然后將內容加載到其他畫布中。
3小時后,我在互聯網上搜索了一個演示,但沒有發現這種可能性。
我無法肯定地說出這一點,因為我從未嘗試過,但是您可能會研究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>
這樣就可以指定拖動的開始和結束位置,然后可以基於這些坐標在畫布元素上添加一些絕對位置。 希望這可以幫助!
您可以在鼠標位置創建畫布
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次,但確實可以做到
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.