消除HTML5 canvas元素下面的幽靈邊緣？

Question

當我們創建一個HTML5 canvas元素，鬼緣出現的canvas元素下方，即使我們設置margin和padding爲0

例子：http://jsfiddle.net/yvbmd/

我們嘗試了各種各樣的事情，但可以」刪除重影邊緣。

我們如何創建一個沒有鬼緣canvas元素？

Answer 1

添加vertical-align: bottom它。

這是由帆布是一個內聯元素引起的。因此，它被有效地視爲一個角色。因此，它必須遵循基線規則，即在字符（例如gjpqy）低於基線的字符的情況下留下一些空格。通過將vertical-align設置爲bottom，您實際上將畫布對齊到下拉字母的底部。只要畫布本身比line-height高，你就沒有問題。如果畫布比line-height短，你將開始看到畫布上面的「鬼利潤」，因爲它保留餘地bdfhklt，高大的字母。這可以通過添加line-height: 1px規則來解決。