HTML5画布:沿着文本基线绘制线条

HTML5 Canvas: Drawing lines along text baselines

本文关键字：基线绘制文本画布 HTML5 更新时间：2023-09-26

HTML5 Canvas API可以绘制水平线，它也可以沿着各种排版基线(悬挂、字母、表意)对齐文本。但是它能沿着相同的基线对齐线条，产生类似WHATWG规范中的图像吗?

不幸的是，此时只有chrome可以帮助你解决这个问题，因为它是唯一一个完全支持TextMetrics对象的流行浏览器，该对象提供了有关当前字体大小的更多信息，允许你计算出各种基线。

使用CanvasRenderingContext2D.measureText()获取TextMetrics对象。