问画布元素内的输入表单

EN

使用绝对定位将文本框放置在画布元素的顶部。

我建议的布局是这样的：

<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> to base，我可能还会添加一个模式背景……

希望这能对-ck有所帮助

这个问题有点老了，但我想提供一个绝对定位的替代方案。你可以设置背景图像(大概是一个比文本框大的div )。下面是一个例子：

HTML：

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

Javascript：

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

下面是一个jsfiddle示例。

正如here所指出的，这实际上是在您设置background-image属性时拍摄画布的快照。设置背景图像后对画布所做的任何更改都不会反映出来(除非您重新设置了它)，但在大多数情况下，这可能是您想要的。

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