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

Posted 2023-03-05

【中文标题】允许用户在 HTML5 Canvas 游戏中输入文本

【英文标题】：Allowing the user to type text in a HTML5 Canvas game

【发布时间】：2012-11-05 23:22:40

【问题描述】：

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

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

这对吗？

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

我们将不胜感激地收到有关如何执行此操作的任何建议。

【问题讨论】：

我认为 Kinetic JS 中没有任何开箱即用的功能来添加文本框。请参考 KineticJS 文档：html5canvastutorials.com/kineticjs/… 它将回答您的大部分问题。您需要通过在矩形上的 Key Strokes 上添加事件处理程序来在画布中创建一个文本区域。然后以特定格式在画布中显示从用户接收到的文本。

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

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

抱歉，没有看到您的编辑！将看一下在矩形上捕获击键，然后看看我是否可以通过文本函数将其反馈回来。

【参考方案1】：

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

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

制作包装器 div 位置：相对

使用 position: absolute 添加画布

使用 position: absolute 添加其他 HTML 控件

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

【讨论】：

老实说，我更像是一个 javascript/Java 程序员而不是 HTML 程序员。所以基本上我现在已经忽略了 CSS（所以文档中没有

是的。诀窍是绝对定位的元素相对于父级。

【参考方案2】：

快速而肮脏的方式：

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

它有效，但肯定不是最漂亮的方法。 ios 实际上有一个相当不错的提示。

【参考方案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 没有任何关系，也没有收到任何关于这篇文章的信息 :)