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

Question

我正在尝试结合使用 Canvas 和出色的 KineticJS 库来编写我的第一个 HTML5 游戏，但我很早就遇到了一些困难。

我想要做的是要求用户在游戏中的一个框中输入他们的名字。做了一些研究后，我看不出有任何方法可以在我正在使用的画布的那部分上获得一个浮动的 HTML 元素。

它是否正确？

在很多Flash和网页游戏中长大，我确定每次输入名称或保存文件名时，都是直接在游戏本身中完成的，它不依赖HTML来生成它吗？

任何关于如何做到这一点的建议将不胜感激。

Answer 1

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

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

• 制作一个包装器 div 位置：相对

• 使用 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 没有任何关系，也没有收到这篇文章的任何内容:)