画布元素上的HTML文本字段

Question

我一直在画布中使用文本,尽管它很容易绘制,但它并不容易与之交互.我开始实现键盘按下功能来更新画布上的文本,但当我意识到我必须包含剪切,复制,过去和撤消功能时,我放弃了.

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

谢谢

Answer 1

您可以使用CSS position:绝对属性和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>