画布元素上的 HTML 文本字段答案

【问题标题】：HTML text field over canvas element画布元素上的 HTML 文本字段
【发布时间】：2011-07-13 19:09:16
【问题描述】：

我一直在画布上玩文字，虽然它很容易绘制，但并不容易与之交互。我开始实现键盘按下功能来更新画布上的文本，但当我意识到我必须合并剪切、复制、过去和撤消功能时就放弃了。

是否有“浮动”html元素在彼此之上？例如，我可以在画布的某些部分上浮动一个文本字段，禁用边框并将颜色设置为画布颜色吗？

谢谢

【问题讨论】：

不，CSS 浮动是为了让元素环绕其他元素。它与其他元素之上的“浮动”元素无关。您可能正在考虑 z-index 或绝对定位。
是的，克里斯在下面的答案中指出了这一点。谢谢

标签： html text canvas field

【解决方案1】：

您可以使用 CSS position: absolute 属性和 z-index: 1 将元素放置在画布上方。

编辑：添加了一个示例：此处包含“1234”的 div 浮动在包含“abcd”的 div 之上（可以用画布元素替换）

<div id="wrapper">
    <div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
        abcd
    </div>
    <div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
        1234
    </div>
</div>

【讨论】：

谢谢。但是，查理在上面提出的使用“CSS Float”的建议是更好，更糟，一样吗？
我不认为浮动元素会堆叠在一起。您需要 position: absolute 或 position: fixed 来实现这一点。
另外我将如何动态添加 CSS 属性？我正在像这样动态创建字段但我不知道如何向其中添加 css 属性。
如果字段是对你的新元素的引用，你可以在Javascript中写field.style.property = value;。
或field.setAttribute("style", "contents of the style attribute")。

【解决方案2】：

您可以使用“不知何故”不可见的文本控件来控制正在输入的文本，并在按键时将 innerHTML 复制到画布上。我正在做类似的事情，复制 DOM 中存在的文本的计算字体 css 属性等等。 Z 索引的工作非常简单。 setFocus() 函数也可以提供帮助。

【讨论】：