在canvas元素上的HTML文本字段 [英] HTML text field over canvas element

问题描述

我一直在画布上的文字，虽然它很容易绘制，它是不容易交互。我开始实现键盘按压功能以更新画布上的文本，但是当我意识到我将不得不合并剪切，复制，过去和撤消功能时放弃。

I have been playing around with text in the canvas, and although it is easy to draw, it is not easy to interact with. I began implementing keyboard press functionality to update text on the canvas, but then gave up when I realized I would have to incorporate cut,copy,past and undo functionality.

有没有浮动html元素在彼此的顶部？例如，我可以在我的画布的某些部分的顶部悬浮文本字段，禁用边框并将颜色设置为画布颜色？

Is there anyway to "float" html elements on top of eachother? For example can I float a text field ontop of certain parts of my canvas, disable the border and set the color to the canvas color?

谢谢

推荐答案

您可以使用CSS position：absolute property with z-index：1 将元素放在画布上。

You may use the CSS position: absolute property with z-index: 1 to place elements above the canvas.

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

added an example: here the div that contains "1234" floats on top of the div that contains "abcd" (that could be replaced with a canvas element)

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

这篇关于在canvas元素上的HTML文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！