javascript - 为什么我的文本框没有显示在我的 Canvas 元素上？

Question

我想使用 Raphael.js 并为我的站点创建一些漂亮的图表/SVG 图形。我希望用户能够输入通常通过 <input type="text"> 进行的文本内容普通 html 中的元素。

无论如何，我可以在 <canvas> 之上使用这个元素吗？元素，这样我就可以让我的用户以这种方式输入文本，还是我必须通过监听击键并将字符绘制到元素上来自己滚动？

改写问题

如果我这样做，为什么我看不到文本字段:

<canvas style="background-color:blue;height:100px;width:100px>
    <input type="text" style="background-color:white;z-index:101" />
</canvas>

如果这不可能，有什么替代方案？

非常感谢

Answer 1

对于不理解 canvas 元素的旧浏览器，需要一些方法来回退到替代内容(例如静态图像或文本“获取支持 canvas 的浏览器”)。 canvas 元素的子元素就是为此指定的。

但是，您可以使用 position:absolute 将输入定位在 Canvas 上(相对或静态):

<canvas style="background-color:blue;height:100px;width:100px">
</canvas>
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/>

Here's a live demo .