在canvas元素中输入表单

Question

我想知道是否有任何方法可以通过javascript从画布元素中获取用户的输入,最好是到texbox(或用户可以在任何地方看到他正在写的内容).

Answer 1

使用绝对定位将文本框放在canvas元素的顶部.

我建议的布局是这样的:

<div style="position:relative;width:800px;height:800px">
    <canvas width="800" height="800"></canvas>
    <input type="text" style="position:absolute;left:100px;top:300px;width:600px; etc...." />
</div>

有这个你有相对定位<div>到你想要弹出的地方,我可能还会添加一个模态背景......

希望这有助于确定

Answer 2

问题有点陈旧,但我想提供绝对定位的替代方案.您可以设置背景图像(可能设置为比文本框大的div).这是一个例子:

HTML:

...<canvas id="canvas"></canvas> <div id="backDrop">...[your textbox]</div>...

使用Javascript:

$('#backDrop').css('background-image', 'url(' + document.getElementById('canvas').toDataURL() + ')');

这是一个jsfiddle作为例子.

如前所述这里,这基本上是采用帆布的快照点设置了background-image属性.在设置背景图像后对画布所做的任何更改都不会被反映(除非您重新设置它),但这可能是您在大多数情况下所需要的.

Answer 3

有一个画布输入库。它不使用任何 DOM 元素，而是纯粹建立在画布上。您可以在http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input阅读更多相关信息并下载它。它是开源的。