画布元素内的输入表单答案

【问题标题】：Input form inside canvas element画布元素内的输入表单
【发布时间】：2012-02-23 01:16:07
【问题描述】：

我想知道是否有任何方法可以从用户那里获取输入，最好是通过 javascript 到 canvas 元素中的 texbox（或用户可以看到他正在写的内容的任何地方）。

【问题讨论】：

【解决方案1】：

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

我建议的布局类似于：

<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> 到你要弹出的地方，我可能还会添加一个模态背景...

希望这有助于 -ck

【讨论】：

谢谢，还没有尝试，但似乎它可能会工作。我将如何获取输入的文本？
通过 JavaScript？您可以通过其.value 属性访问它
谢谢，我对 JS 比较陌生。
没关系，每个人都必须从某个地方开始，你可能想尝试一下 jQuery (jquery.com)，因为它让这样简单的事情变得更容易
哦，我正在使用 JQuery。可能忘记提了。我只是使用 .fadeIn('fast') ，它就像一个魅力。

【解决方案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 所述，这实质上是在您设置背景图像属性的位置拍摄画布的快照。设置背景图像后对画布所做的任何更改都不会反映（除非您重新设置它），但这可能是您在大多数情况下想要的。

【讨论】：

【解决方案3】：

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

【讨论】：

其实它确实使用了隐藏的 DOM 输入元素。

【解决方案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>

【讨论】：

【解决方案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";

}

【讨论】：