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

Question

我正在尝试使用Canvas和优秀的KineticJS库组合编写我的第一个HTML5游戏，并且我早期就打了一个墙。

我想要做的是让用户在游戏的方框中输入他们的名字。完成了一些研究之后，除了在我正在使用的画布部分上获取浮动HTML元素之外，我无法看到任何方法。

这是对的吗？

在很多Flash和网页游戏中长大，我确信每次输入名称或保存文件名时，都会直接进入游戏本身并且不依赖于HTML来生成它？

非常感谢有关如何做到这一点的任何建议。

Answer 1

您可以使用以下CSS技术在画布顶部获取浮动HTML元素。

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

• 创建一个包装器div位置：relative

• 使用position：absolute

添加画布

• 使用position：absolute

添加其他HTML控件

这适用于所有HTML元素，而不仅仅是画布。

Answer 2

快速而肮脏的方式：

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

它有效，但肯定不是最漂亮的方式。 iOS实际上有一个很好的提示。

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没有任何关系，也没有收到任何关于此帖子的内容：）