HTML5.0 холст текстовое поле

Question

Я хочу нарисовать интерфейс входа в систему, поэтому мне нужно нарисовать текстовое поле для ввода и кнопку для отправки! если я достигну этого с помощью ввода и тега кнопки, это будет легко! но я должен был нарисовать их на холсте, используя HTML5.0. Я искал Google в течение двух дней, я не могу найти хорошую идею! у кого есть опыт? Помоги мне! заранее спасибо!

Answer 1

Я бы очень рекомендовал использовать для этого элементы HTML. Вы можете наложить их на холст с помощью CSS-позиционирования, так что может показаться, что они являются частью того, что вы нарисовали на самом холсте.

Создание этого исключительно с использованием canvas - очень сложная задача.

Во-первых, вам нужно создать подпрограммы для рисования полей ввода и кнопки. Затем вам понадобятся процедуры, чтобы нарисовать их в разных состояниях, например кнопку, когда она нажата. Вам также нужно будет написать код, который позаботится об отображении каретки в текстовых полях, символов, вводимых пользователем, добавить код для обработки событий клавиш, чтобы создавать ключи, обрабатывать комбинации клавиш с копировальной пастой, обрабатывать клавиши со стрелками и нажимать на разные части текст для перемещения ...

и многое другое.

Серьезно. Сделайте это с элементами ввода HTML. На основании вашего вопроса это лучший выбор.

Answer 2

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

Если, однако, вы просто делаете это как вызов, то, как сказала Джани, вам нужно написать подпрограммы для текстового поля, каретки и кнопки. Затем напишите функцию, которая запустит onKeydown и проверит код клавиши нажатой клавиши. Затем нарисуйте в поле соответствующую букву (Unicode работает на холсте?). Вы также можете использовать клавиши со стрелками и клавишу ввода здесь. Убедитесь, что никакие другие элементы или элементы браузера не являются целевыми, когда предполагается, что пользователь печатает.

Удачи:)

Answer 3

Вы хотите нарисовать интерфейс входа в систему? Я не совсем понимаю, что бы вы не использовали обычную графику, но вот учебник по основам работы тегов canvas и что вы можете с этим сделать.