HTML5 Canvas: 沿文本基线画线

Question

HTML5 Canvas API 可以绘制水平线笔划，还可以沿各种排版基线（悬挂、字母、表意）对齐文本。但它能否沿着相同的基线对齐线条笔划，产生类似 this image from the WHATWG spec?

的东西

Answer 1

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

使用CanvasRenderingContext2D.measureText()得到TextMetrics对象。有关详细信息，请参阅 MDN TextMetrics。