在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阶段，因此欢迎任何错误报告和反馈！ :)