Input form inside canvas element

问题:

I'm wondering if there was any way to get an input from the user, preferably to a texbox (or anywhere a user can see what he's writting) in a canvas element through javascript.

回答1:

Position a textbox over the top of the canvas element using absolute positioning.

my suggested layout is something like:

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

with this you have the relative positioned <div> to base where your going to pop things up over, I would probably also add a modal backdrop...

hope this helps -ck

回答2:

Question is a bit old, but I wanted to provide an alternative to absolute positioning. You can set the background-image (presumably to a div bigger than your textbox). Here's an example:

HTML:

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

Javascript:

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

Here's a jsfiddle as an example.

As noted here, this essentially takes a snapshot of the canvas at the point you set the background-image property. Any changes you make to the canvas after setting the background-image will not be reflected (unless you re-set it), but this is probably what you want in most cases.

回答3:

There is a canvas input library. It does not use any DOM elements, but is built purely on canvas. You can read more more about it and download it at http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input . It's open-source.

回答4:

You can also try it with the following:

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