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