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

Question

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

Answer 1

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

мой Рекомендованное макет что-то вроде:

<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

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

HTML:

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

Javascript:

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

Вот jsfiddle в качестве примера.

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

Answer 3

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

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

Answer 4

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