canvas 元素上的 HTML 文本字段

Question

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

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

谢谢

Answer 1

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

编辑：添加了一个示例：这里包含“1234”的 div 浮动在包含“abcd”的 div 顶部（可以用 canvas 元素替换）

<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>

Answer 2

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