爲什麼我的文本框不顯示在我的畫布元素上？

Question

我想使用Raphael.js併爲我的網站創建一些漂亮的圖表/ SVG圖形。我希望用戶能夠輸入正常情況下通過正常html中的<input type="text">元素輸入的文本內容。

反正是有，我可以在<canvas>元素的頂部使用此元素，這樣我可以有我的用戶輸入文本時的方式，還是我通過監聽鍵盤和繪畫人物推出自己到元素上？

改寫問題

爲什麼我看不到文本字段，如果我這樣做：

<canvas style="background-color:blue;height:100px;width:100px> 
    <input type="text" style="background-color:white;z-index:101" /> 
</canvas> 

，如果這是不可能的，有什麼辦法？

非常感謝

Answer 1

需要有某種方式來退回到替代的內容（如靜止圖像或文本「獲得帆布支持瀏覽器」）的舊的瀏覽器不理解canvas元素。畫布元素的孩子被指定用於此目的。

可以，但是，定位輸入在畫布與position:absolute（相對的，或靜態）：

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

Here's a live demo。