如何在画布中绘制文本框

Question

我需要画布里面的文字框.是否可以在画布内绘制文本框？

喜欢:

<canvas>
<input type="text">
</canvas>

我不想要这样的回答:

<canvas style="background-color:blue;height:100px;width:100px">
</canvas>
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/>

可以使用javascript在canvas标签内绘制文本框吗？

Answer 1

不,这是不可能的.

如果你想要这样的文本框,那么你的答案是:

1. 完全按照你展示的方式使用CSS

2. • 制作一个文本框类,绘制一个矩形和一个闪烁的光标
   • 使用手写的碰撞检测来跟踪点击的时间
   • 检测到冲突时注册和取消注册键盘事件
   • 根据输入绘制和清除文本
   • 创建一个速率限制器,这样键不会太快
   • 侦听"输入"或"退格"键,打开keyup以添加另一行,或删除当前文本
   • 当它已经具有"焦点"时,在框内添加一个额外的点击监听器,根据点击检测到的位置,根据字符串,尝试找出"光标"(你发明的)应该在哪里.画布,与画布中矩形的位置相比,加上矩形的起点和文本的起点之间的"填充",加上字符串的计算宽度
   • 如果点击的X和Y高于矩形的X,加上文本开始前的填充,但低于矩形的X,加上填充,加上文本宽度,那么你需要循环并测量文本,字符乘以字符,直到你找到"最适合"的地方考虑"光标",为下一轮编辑...必须使用鼠标和键盘作为输入功能,你必须创建和注册你自己的事件......

与CSS相比,这是一项很多工作.

所以从技术上讲,是的,如果你愿意写几百行未经编码的代码,你可以制作类似于输入框的东西,做同样的事情,如果你画的是鼠标/除了C++之外,在空屏幕上使用键盘功能的文本框...

但是你不能添加DOM元素并使它们成为画布的一部分,完成所有事件和自然行为.

有一些图书馆可能有所帮助,但我不明白为什么你想要完成所有这些工作,没有充分的理由.

Answer 2

尝试使用此站点在画布上绘制文本框组件.它不是CSS或HTML,小javascript.它解释了所有关于画布中的文本. CanvasInput - HTML5 Canvas文本输入