在 HTML 画布元素上绘制文本的最佳方法是什么？答案

【问题标题】：What is the best way to draw text on an HTML canvas element?在 HTML 画布元素上绘制文本的最佳方法是什么？
【发布时间】：2009-04-27 22:58:32
【问题描述】：

不幸的是，canvas 元素不能很好地处理文本。有很多方法（参见例如http://canvaspaint.org/blog/2006/12/rendering-text/），但它们大多看起来像黑客。我能做些什么是跨平台的，并为我提供最大的灵活性来让我的字体像我想要的那样？

【问题讨论】：

该链接是旧的，它指向的规范已经更新，以说明文本绘图 api。有关类似（希望有帮助）的问题，请参阅 stackoverflow.com/questions/719848/…
fillText() 仅在 Safari 和 Firefox 的 beta 版本中受支持（不确定其他浏览器），这并没有使它非常有用。我的链接中提到的各种 hack 大多是跨平台的。

标签： javascript html text canvas

【解决方案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）

【讨论】：

【解决方案2】：

如果你想使用 HTML5 文本方法，你应该试试这个库：http://code.google.com/p/canvas-text/ 我是主要开发人员，所以我可以提供帮助，并且可以很快做出更改。

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

它仍处于 alpha 阶段，因此欢迎任何错误报告和反馈！ :)

【讨论】：