javascript - html5画布动力学文本框

Question

我想知道是否有办法让我打开一个文本框供用户在 onclick 事件中输入？我该怎么做呢？我现在在想，我可能有一种方法可以获取用户在画布上键入的内容，并使用我读过的方法来输出文本。这是一种可能吗？但是我如何让用户首先在画布上打字？

我做了很多阅读，我能找到的所有例子都是关于简单地将文本输出到画布上而不是创建一个文本框。

有任何想法吗？

Answer 1

你必须从字面上做一个，就像 onclick 事件触发一样，你这样做：var myInput = document.createElement("textarea");

您需要设置myInput.style.width, height, top, left，当然还有myInput.style.positionto "absolute"，然后将其放置在用户期望的位置。

然后你需要给它分配事件。也许在 keydown 上它会寻找 Enter 键，如果按下 Enter 键，它将消失并提交文本，但您希望它提交。

然后将其添加到页面中。

也许它会在模糊事件上做同样的事情（如果用户点击离开）。

Answer 2

画布是位图图像。您不能将元素“放入其中”。不过，您可以将一个悬停在它上面。我认为您正在寻找的是 html5 contenteditable 属性。

Answer 3

一个简单的解决方案 - 使用 Javascript 的警报框。这将使我们能够抓取用户想要放置在屏幕上的文本。然后在画布上随心所欲地写文本（很多关于如何在画布上写文本的教程）。