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

时间:2015-03-13 13:06:43

标签: javascript jquery html5 canvas

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

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

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

2 个答案:

答案 0 :(得分:0)

我不能肯定地说这个,因为我从未尝试过,但你可能会调查mousedownmouseup事件。您可以创建一个用户可以拖入的元素并在其上侦听这些事件,如下所示:

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>

它为您提供了拖动的起始位置和结束位置,然后您可以根据这些坐标附加一个具有绝对定位的画布元素。希望这有帮助!

答案 1 :(得分:0)

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

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),我填充画布可以(48-48)= can0

这个目的只能达到9,但确实可以证明它可以(输入)

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