html5.0画布文本字段
我想绘制一个登录界面，所以我必须绘制文本字段来输入和按钮来提交！ 如果我通过使用输入和按钮标签来实现它，那就很容易了！但我需要使用 html5.0 在画布上绘制它们。我在谷歌搜索了两天，找不到好主意！ 谁有经验？帮我！ 提前致谢！
i wanna draw a login interface,so i have to draw the textfield to input and button to submit!
if i achieve it by using input and button tag,it will be easy!but i was required to draw them in the canvas using html5.0 . i have searched google for two days,i cannot find a good idea!
who has experience? help me!
thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我强烈建议为此使用 HTML 元素。您可以使用 CSS 定位将它们覆盖在画布上，因此它们看起来像是您在画布上绘制的内容的一部分。
纯粹用画布创建这个是非常具有挑战性的。
首先，您需要创建例程来绘制输入框和按钮。然后，您需要例程来在不同状态下绘制它们，例如按下按钮时的按钮。您还需要编写代码来负责在文本框中显示插入符号、用户键入的字符、添加代码来处理按键事件以生成按键、处理复制粘贴按键组合、处理箭头键以及单击屏幕的不同部分。文本移动...
以及更多。
严重地。使用 HTML 输入元素执行此操作。根据你的问题，这是最好的选择。
I would very much recommend using the HTML elements for this. You can overlay them over the canvas using CSS positioning, so it will seem like they are part of whatever you have drawn on the canvas itself.
Creating this purely with canvas is very challenging.
Firstly, you will need to create routines to draw input boxes and the button. Then, you'll need routines to draw them in different states, like button when it's pressed down. You'll also need to write code that takes care of displaying the caret in the textboxes, the characters the user types, add code to handle key events to produce keys, handle copypaste key combinations, handle arrow keys and clicking on different parts of the text to move around...
And much more.
Seriously. Do it with the HTML input elements. Based on your question that's the best choice.
我同意，如果你想出于专业或实际目的这样做，那么你绝对应该使用 html 并使用绝对定位和透明背景将其覆盖在画布上。
然而，如果您只是将其作为一项挑战，那么，正如 Jani 所说，您将需要为文本字段、插入符号和按钮编写例程。然后，编写一个函数来触发 onKeydown 并检查按下的键的键码。然后在框中绘制适当的字母（Unicode 在画布上工作吗？）。您还可以在此处处理箭头键和 Enter 键。确保当用户应该打字时没有其他元素或浏览器元素成为目标。
祝你好运 ：）
I would agree that if you want to do this for professional or practical purposes then you should definitely use html and use absolute positioning and a transparent background to overlay it over the canvas.
If, however, you are just doing this as a challenge, then, as Jani said, you would need to write routines for the text field, the caret, and the button. Then, write a function that will trigger onKeydown and will check they key code of the pressed key. Then draw the appropriate letter in the box (Does unicode work in canvas?). You could also handle arrow keys and the enter key here. Make sure that no other elements or browser elements are targeted when the user is supposed to be typing.
Good luck :)
您想在 ? 上绘制登录界面？我不太清楚你不会使用常规图形，但这里有一个 关于画布如何使用的基础知识的教程 标签的工作原理以及你可以用它做什么。
You want to draw a login interface onto a ? I don't quite know what you wouldn't use regular graphics, but here's a tutorial on the basics of how the canvas tags works and what you can do with it.