Форма ввода внутри элемента canvas

Мне интересно, есть ли способ получить ввод от пользователя, предпочтительно в texbox (или в любом месте, где пользователь может видеть, что он пишет) в элементе canvas через javascript.

9
canvas html5 input javascript

4 ответов

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

мой предлагаемый макет что-то вроде:

<div style="position:relative;width:800px;height:800px">
    <canvas width="800" height="800"></canvas>
    <input type="text" style="position:absolute;left:100px;top:300px;width:600px; etc...." />
</div>

С этим у вас есть родственник, расположенный <div> чтобы основать, где вы собираетесь всплывать, я бы, вероятно, также добавил модальный фон...

надеюсь, это поможет-ck

8

вопрос немного старый, но я хотел предоставить альтернативу абсолютному позиционированию. Вы можете установить фоновое изображение (предположительно, div больше вашего текстового поля). Вот пример:

HTML-код:

...<canvas id="canvas"></canvas> <div id="backDrop">...[your textbox]</div>...

Javascript:

$('#backDrop').css('background-image', 'url(' + document.getElementById('canvas').toDataURL() + ')');

здесь jsfiddle в качестве примера.

Как отмечает здесь, это по существу делает снимок холста в точке, где вы устанавливаете свойство background-image. Любой изменения, которые вы делаете на холсте после установки фона-изображение не будет отражено (если вы не переустановите его), но это, вероятно, то, что вы хотите в большинстве случаев.

7

существует библиотека ввода холста. Он не использует никаких элементов DOM, но построен исключительно на холсте. Вы можете прочитать больше об этом и загрузить его вhttp://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input . Это открытый исходный код.

4

вы также можете попробовать его со следующим:

<div style="margin:0px;padding:0px;position:absolute;width:[amount by programmer];height:[amount by programmer];border-style:solid;border-color:[if wanted];">
<canvas style="width:700px;height:700px;"></canvas>
<input type="text" style="position:absolute;width:[amount by programmer];height:[amount by programmer];"/></div>
2