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

Question

是否可以用鼠标动态创建HTML5canvas？

例如：我想用我的鼠标画HTML5 canvas 然后加载内容到不同的canvas.

我在互联网上搜索了 3 小时的演示，但没有发现任何可能性。

Answer 1

我不能肯定地说，因为我从未尝试过，但您可以查看 mousedown and 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>

这为您提供了拖动的开始和结束位置，然后您可以附加一个 canvas 元素，并根据这些坐标进行一些绝对定位。希望这对您有所帮助！

Answer 2

您可以在鼠标位置

上创建一个canvas

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

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

编辑：动态内容

您可以给 canvas 一个 ID 并用它来绘制

在此示例中，创建的 canvases 具有 id canN (can0,can1,canN)

如果我们在小键盘上按 0（键码 48），我填写 canvas can(48-48)= can0

这门课程最多只适用于 9 个，但它确实证明它可以（vas）完成

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

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

Is it possible to create `html5 canvas` dynamically with the mouse?

html

javascript

jquery

canvas