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

Question

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

无论如何，我可以在<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元素的子元素是为此目的而指定的。

但是，您可以使用position:absolute（相对或静态）在画布上定位输入：

<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