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为例。

如上所述here，这实际上是在您设置background-image属性的位置拍摄画布的快照。设置背景图像后对画布所做的任何更改都不会被反映（除非您重新设置），但这可能是您在大多数情况下所需要的。

Answer 3

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

Answer 4

您也可以尝试使用以下内容：

<div style="margin:0px;padding:0px;position:absolute;width:[amount by programmer];height:[amount by programmer];border-style:solid;border-color:[if wanted];">
<canvas style="width:700px;height:700px;"></canvas>
<input type="text" style="position:absolute;width:[amount by programmer];height:[amount by programmer];"/></div>

Answer 5

我必须制作一个带有输入的响应式画布（用于聊天）。使用与画布具有相同背景颜色的位置：固定输入（无填充、边框等），我设法将输入准确定位在画布顶部并让它缩放，无论浏览器的宽度/高度如何窗户。奇迹般有效！这是我使用的 javascript（当然，您必须调整值以适合您的区域）：

window.addEventListener("resize", deviceCheckResize);
    
function deviceCheckResize()
{
    ge("mp_input").style.left = (ge("myCanvas").offsetLeft + ge("myCanvas").offsetWidth*0.670) + "px";
    ge("mp_input").style.top = (ge("myCanvas").offsetTop + ge("myCanvas").offsetHeight * 0.914) + "px";
    
    tempHeight = (ge("myCanvas").offsetHeight * 0.055);
    ge("mp_input").style.height = tempHeight + "px";
    ge("mp_input").style.lineHeight = tempHeight + "px";
    ge("mp_input").style.width = (ge("myCanvas").offsetWidth * 0.243) + "px";
    ge("mp_input").style.fontSize = (w/64) + "px";

}

在canvas元素中输入表单

5 个答案: