Текстовое поле HTML над элементом холста

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

Есть ли все-таки "float" html-элементы поверх eachother? Например, можно ли плавать текстовое поле на некоторых частях моего холста, отключить границу и установить цвет в цвет холста?

Ответы

Ответ 1

Вы можете использовать свойство CSS position: absolute с z-index: 1 для размещения элементов выше холст.

EDIT: добавлен пример: здесь div, содержащий "1234", плавает поверх div, который содержит "abcd" (который может быть заменен элементом canvas)

<div id="wrapper">
    <div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
        abcd
    </div>
    <div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
        1234
    </div>
</div>

Ответ 2

Вы можете использовать невидимый текстовый контроль "как-то", чтобы получить контроль над вводимым текстом и скопировать innerHTML на холст при нажатии клавиши. Я делаю аналогичные вещи, копируя вычисленные атрибуты css шрифта текста, присутствующего в DOM, и многое другое. Z-индексы работают довольно прямо. Функция setFocus() также может помочь.