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

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