Как нарисовать текстовое поле внутри холста

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?

Answer 1

Нет. Это невозможно.

Если вы хотите текстовые окна, как это, то ваши ответы:

1. использование CSS именно так, как вы показываете

2. • сделать класс текст ящик, который рисует прямоугольник и мигающий курсор
   • отслеживает, когда его щелкают, используя рукописное обнаружение столкновения
   • регистрирует и отменяет регистрацию событий клавиатуры при столкновении i s обнаружен
   • рисует и очищает текст, основанный на входе
   • создает скорость-ограничитель, так что ключи не срабатывают слишком быстро
   • прослушивает «войти» или «BackSpace» ключи, на keyup добавить еще строка или стереть текущий текст
   • добавьте дополнительный добавочный клик в поле, когда он уже имеет «фокус», чтобы выяснить, где «курсор» (который вы изобретаете) должен быть с точки зрения строка, основанная на обнаруженной позиции клика в холсте, по сравнению с позицией прямоугольника в холсте, плюс «отступы» между начальной точкой прямоугольника и начальной точкой текста плюс вычисленная ширина строки
   • , и если X и Y клика выше, чем X прямоугольника прямоугольника, плюс отступы перед началом текста, но ниже, чем X плюс плюс пробел прямоугольника, плюс ширина текста, тогда вам нужно прокрутить и измерить текст, по характеру, пока не найдете «наилучший вариант» для того, где следует учитывать «курсор» для следующего раунда редактирования ... который должен функционировать с использованием мыши и клавиатуры в качестве входов, которые вы должны создать и зарегистрировать события сам ...

Это много работы, по сравнению с CSS.

Так технически, да, вы можете сделать что-то как поле ввода, если вы готовы написать то, что может быть сотнями строк незыблемого кода, сделать то же самое, что и вы, если вы рисовали текстовый ящик с мышью/клавиатурой на пустом экране, используя только C++ ...

Но вы не можете добавлять элементы DOM и делать их частью холста, в комплекте со всеми их событиями и естественными поведения.

Есть несколько библиотек, которые могут помочь, но я не понимаю, почему вы хотите пройти всю эту работу без уважительной причины.

Answer 2

Попробуйте этот сайт, чтобы нарисовать компонент текстового поля на холсте.Это не CSS или HTML, мало javascript. В нем объясняется все текст в холсте. CanvasInput - HTML5 Canvas Text Input

Answer 3

Я думаю, что следующее решение работает хорошо, хотя вы не можете ввести в текстовое поле внутри холста можно использовать отдельный текстовый блок и применить этот текст в текстовой области в пределах холста http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/.