在HTML canvas元素上繪制文本的最佳方法是什么？

Question

不幸的是，canvas元素不能很好地處理文本。 有很多方法（例如，請參見http://canvaspaint.org/blog/2006/12/rendering-text/ ），但它們大多像黑客一樣。 我該怎么做是跨平台的，並且可以最大程度地靈活地設置字體，如我所願？

Answer 1

您是否看過typeface.js， http：//typeface.neocracy.org 。 我聽說它寫文本非常扎實。 來自他們的網站：

“ typeface.js使用瀏覽器的矢量繪圖功能在HTML文檔中繪制文本。很長一段時間以來，瀏覽器都支持矢量繪圖-Firefox，Safari和Opera支持<canvas>元素（以及SVG）， IE支持VML。

typeface.js項目包含兩個組件：用於轉換字體的perl模塊和用於在瀏覽器中繪制的javascript庫。 perl模塊從truetype字體中提取字形輪廓信息，並以JSON格式寫入該數據。 然后，javascript庫遍歷HTML文檔，並使用<canvas>或VML繪制文字來呈現文本。

在支持<canvas>的瀏覽器中，文本是可選的，但您必須具有信心。 當您選擇時，沒有反饋，也沒有突出顯示以表明您正在運行。 未來的工作將旨在實現更好的跨瀏覽器支持，以突出顯示文本。”（引自http://typeface.neocracy.org/usage.html ）

Answer 2

如果您想使用HTML5文本方法，則應嘗試使用以下庫： http : //code.google.com/p/canvas-text/我是主要開發人員，因此我可以提供幫助，並迅速做出更改。

演示在這里： http : //canvas-text.googlecode.com/svn/trunk/examples/index.html

它仍處於Alpha階段，因此歡迎任何錯誤報告和反饋！ :)