允许用户在HTML5 Canvas游戏中输入文本

Question

我正在尝试使用Canvas和优秀的KineticJS库编写我的第一个HTML5游戏，但是我在早期遇到了一些困难。我想要做的是在游戏中要求用户在框中输入他们的姓名。经过一些研究，我发现除了在我使用的Canvas部分上方获取浮动的HTML元素之外，似乎没有其他办法。

这是正确的吗？由于我从小接触了很多Flash和网络游戏，每次我需要输入名称或保存文件名称时，它都直接在游戏本身中完成，而不依赖于HTML来生成。您有任何关于如何实现此功能的建议将不胜感激。

- Craigeve

---

我认为Kinetic JS没有内置的添加文本框的能力。请参考KineticJS文档：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ 这将回答你大部分问题。您需要通过在矩形上添加按键事件处理程序，在画布中创建一个文本区域。然后以特定格式在画布中显示从用户接收到的文本。 - Amber

这里讨论的是在画布上放置文本，而不是从用户那里获取文本。我已经使用了很多KineticJS Text来制作我的按钮，我想要的是一种方法，即说“请输入您的姓名：”（将使用文本属性），然后在Canvas JS函数中捕获文本。 - Craigeve

我刚刚编辑了我的答案。在Kinetic JS中没有类似HTML文本区域的东西。 - Amber

抱歉，没有看到你的编辑！我会尝试捕获矩形区域内的按键并通过文本函数反馈回去。 - Craigeve

Answer 1

使用以下CSS技术，您可以在画布顶部获得一个浮动的HTML元素。

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

• 将包装器 div 的位置设置为相对定位

• 使用绝对定位在内部添加画布

• 使用绝对定位在内部添加其他 HTML 控件

这适用于所有的 HTML 元素，不仅仅是 canvas。

- Mikko Ohtamaa

---

说实话，我更倾向于JavaScript/Java程序员而不是HTML。因此，目前我忽略了CSS（因此文档中没有<style>部分），只专注于创建一个单独的div，将KineticJS画布加载到其中。如果我按照那个指南去做，我猜我的画布内所有对象都必须被转置？ - Craigeve

是的。这个技巧是绝对定位元素相对于父元素。 - Mikko Ohtamaa

Answer 2

快速而不太严谨的方法：

var userInput = prompt('What is your name?');

这个方法是可行的，但并不是最美观的方式。iOS实际上有一个相当不错的提示框。

- pillar15

Answer 3

我知道这有点老了，但是……

Canvas Input 是一个我在游戏中使用的很棒的库：



如您所见，我可以在框中输入文字并将其显示在屏幕上。它很容易使用：

var input = new CanvasInput({
    canvas: document.getElementById("ctx"),
    x: 0,
    y: 0,
    fontSize: 18,
    fontFamily: 'Arial',
    fontColor: '#212121',
    fontWeight: 'bold',
    width: 200,
    padding: 8,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 3,
    onsubmit: function() {
        // your code here for submitting (when user presses enter)
    },
});

免责声明：我与CanvasInput无关，也没有从本篇文章中获得任何利益 :)

- sguan