キャンバス要素内の入力フォーム

ユーザーからの入力を取得する方法があれば、できればテクスチャボックス（または彼が書いているものをユーザーが見ることができるところ）にキャンバス要素からjavascriptで入力する方法があるのだろうかと思います。キャンバス要素内の入力フォーム

出典

2012-02-23 HolyThunder

キャンバス要素の上に絶対配置を使用してテキストボックスを配置します。

私の推奨レイアウトのようなものです：あなたはオーバー物事をポップアップするつもりはどこ、私はおそらくもモーダルな背景を追加することになりベースに<div>を配置相対を持ってこれに

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

...

これが役立つことを願って-ck

出典

2012-02-23 02:16:28 ckozl

ありがとうございます。まだ試していませんが、おそらく動作するようです。入力テキストを先に取得するにはどうすればよいですか？ JavaScriptを使用して – HolyThunder

を送信しますか？あなたは '.value'プロパティを通してそれにアクセスします – ckozl

ありがとう、私は比較的JSです。 – HolyThunder

質問は少し古いですが、私は絶対的な位置付けの代替手段を提供したいと考えていました。背景画像を設定することができます（おそらく、あなたのテキストボックスよりも大きい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プロパティを設定した時点でキャンバスのスナップショットを取得します。背景画像を設定した後にキャンバスに加えた変更は反映されませんが（再設定しない限り）、これはおそらくほとんどの場合必要なものです。

出典

2012-12-14 21:15:38

また、次でそれを試すことができます。

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

出典

2014-06-02 13:44:40

キャンバス入力ライブラリがあります。 DOM要素は使用しませんが、純粋にキャンバス上に構築されています。詳細については、http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Inputでダウンロードできます。オープンソースだ。

出典

2014-07-11 21:23:28 rvcam

実際には、隠されたDOM入力要素を使用します。 –

キャンバス要素内の入力フォーム

答えて

関連する問題