web-dev-qa-db-ja.com

キャンバス要素上のHTMLテキストフィールド

私はキャンバスのテキストをいじってみましたが、描くのは簡単ですが、操作するのは簡単ではありません。キャンバス上のテキストを更新するためにキーボードプレス機能の実装を開始しましたが、切り取り、コピー、貼り付け、元に戻す機能を組み込む必要があることに気付いたときに諦めました。

とにかく、html要素を互いに「フロート」させる方法はありますか？たとえば、キャンバスの特定の部分の上にテキストフィールドをフロートさせ、境界線を無効にして、色をキャンバスの色に設定できますか？

ありがとうございました

htmltextcanvasfield
18
puk

CSS position：absolute プロパティと z-index：1 を使用して、要素をキャンバスの上に配置できます。

編集：例を追加しました：ここでは、「1234」を含むdivが「abcd」を含むdivの上に浮かんでいます（これはcanvas要素に置き換えることができます）

<div id="wrapper">
    <div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
        abcd
    </div>
    <div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
        1234
    </div>
</div>
18
ChrisJ

'somehow' invisible text-controlを使用して、入力されるテキストを制御し、キーを押すとキャンバスにinnerHTMLをコピーできます。私は同様のことをしていて、DOMに存在するテキストの計算されたフォントcss属性などをコピーしています。 Zインデックスはかなりまっすぐに機能します。 setFocus（）関数も役立ちます。

2
tomasb