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

Question

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

Answer 1

Поместите текстовое поле поверх элемента 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

Answer 2

Вопрос немного устарел, но я хотел предоставить альтернативу абсолютному позиционированию.Вы можете установить background-image (предположительно на 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.Любые изменения, которые вы вносите в холст после установки фонового изображения, не будут отражены (если вы не переустановите его), но это, вероятно, то, что вам нужно в большинстве случаев.

Answer 3

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

Answer 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>