如何在畫布內繪製文本框

Question

我需要畫布內的文本框。是否有可能在畫布內繪製文本框？

，如：

<canvas> 
<input type="text"> 
</canvas> 

我不想回答是這樣的：

<canvas style="background-color:blue;height:100px;width:100px"> 
</canvas> 
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/> 

可以得出使用javascript canvas標籤內的文本？

Answer 1

不，這是不可能的。

如果你想文本框這樣，那麼你的答案是：你看

• 1. 使用CSS完全相同的方式讓一個文本框類，它繪製一個矩形和一個閃爍的光標

  2. 使用手寫碰撞檢測來跟蹤它被點擊的時間
  3. 當碰撞i時註冊和取消註冊鍵盤事件小號檢測
  4. 平清除文本的基礎上，輸入
  5. 創建一個速率限制，使鍵不會太快火
  6. 監聽「輸入」或「Backspace」鍵，在keyup再添行或擦除當前文本
  7. 在已經有「焦點」的框中添加一個額外的點擊偵聽器，試圖找出「光標」（您發明的）應該在的位置字符串，基於點擊在畫布內檢測到的位置，與矩形在畫布中的位置相比，加上矩形起點和文本起點之間的「填充」，再加上字符串的計算寬度
  8. 如果點擊的X和Y高於矩形的X，加上文本開始前的填充，但低於矩形的X，加上填充，加上文本寬度，則需要循環並測量文本，直到你找到「最合適」的地方去考慮「光標」，以便進行下一輪的編輯......它必須使用鼠標和鍵盤作爲輸入來工作，你必須創建它並親自注冊的事件...

這是工作的很多，比起CSS。

所以從技術上來說，是的，你可以做一些如這樣的輸入框，如果你願意寫出可能是數百行的未定義代碼，做同樣的事情，你會做你正在一個空屏幕上使用鼠標/鍵盤功能的文本框，只用C++ ...

但是你不能添加DOM元素並使它們成爲畫布的一部分，並完成所有事件和自然行爲。

有些圖書館可能有幫助，但我不明白爲什麼你想要完成所有這些工作，沒有一個很好的理由。

Answer 2

試試這個網站在畫布上繪製文本框組件。它不是CSS或HTML，很少有JavaScript。 它解釋了關於畫布中的所有內容。 CanvasInput - HTML5 Canvas Text Input

Answer 3

我認爲下面的解決方案效果很好，但你不能在鍵入Canvas中你可以使用一個單獨的文本框，並在畫布http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/內申請文本到文本區的文本框中。