Me pregunto si hubo alguna forma de obtener una entrada del usuario, preferiblemente en un texbox (o en cualquier lugar donde un usuario pueda ver lo que está escribiendo) en un elemento canvas mediante javascript.Formulario de entrada dentro del elemento canvas
Sitúe un cuadro de texto sobre la parte superior del elemento de lienzo utilizando la posición absoluta.
mi diseño sugerido es algo así como:
<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>
con esto se ha posicionado a la relativa <div> a la base, donde el va a hacer estallar las cosas más, probablemente también añadir un telón de fondo modal ...
Espero que esto ayude -ck
La pregunta es un poco antigua, pero quería ofrecer una alternativa al posicionamiento absoluto. Puede establecer la imagen de fondo (presumiblemente en un div más grande que su cuadro de texto). He aquí un ejemplo:
HTML:
...<canvas id="canvas"></canvas> <div id="backDrop">...[your textbox]</div>...
Javascript:
$('#backDrop').css('background-image', 'url(' + document.getElementById('canvas').toDataURL() + ')');
He aquí una jsfiddle como un ejemplo.
Como se indica en here, esto esencialmente toma una instantánea del lienzo en el punto en el que establece la propiedad background-image. Cualquier cambio que realice en el lienzo después de configurar la imagen de fondo no se reflejará (a menos que lo vuelva a configurar), pero esto es probablemente lo que desea en la mayoría de los casos.
También puede probar con lo siguiente:
<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>
hay una biblioteca de entrada de la lona. No utiliza ningún elemento DOM, pero está construido exclusivamente sobre lienzo. Puede leer más sobre él y descargarlo al http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input. Es de código abierto.
En realidad, utiliza un elemento de entrada DOM oculto. –
Gracias, no lo he intentado todavía pero parece que probablemente funcione. ¿Cómo iría para obtener el texto invocado hasta el final? – HolyThunder
a través de JavaScript? lo accedería a través de su propiedad '.value' – ckozl
Gracias, soy relativamente nuevo en JS. – HolyThunder