javascript - 在 HTML canvas 元素上绘制文本的最佳方式是什么？

Question

不幸的是，canvas 元素不能很好地处理文本。有很多方法(参见例如 http://canvaspaint.org/blog/2006/12/rendering-text/ )，但它们大多看起来像是 hack。我能做些什么才能做到跨平台并为我提供最大的灵 active 来制作我想要的字体？

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> 的浏览器中文本是可以选择的，但你必须有信心。当您选择时，没有反馈，也没有突出显示让您知道它正在工作。 future 的工作将旨在实现更好的跨浏览器支持，以选择带突出显示的文本。”(引自 http://typeface.neocracy.org/usage.html)