gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 10:47:17 25 4
gpt4 key购买 nike

我想使用 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>

如果这不可能,有什么替代方案?

非常感谢

最佳答案

对于不理解 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 .

关于javascript - 为什么我的文本框没有显示在我的 Canvas 元素上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7538669/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com