javascript - HTML5 Canvas: テキストのベースラインに沿って線を引く

Question

HTML5 Canvas API は、水平線ストロークを描画でき、さまざまなタイポグラフィ ベースライン (ハンギング、アルファベット、表意文字) に沿ってテキストを配置することもできます。しかし、WHATWG 仕様からこの画像のようなものを生成して、同じベースラインに沿って線ストロークを揃えることはできますか?

Answer 1

残念ながら、現時点でこの問題を解決できるのはクロムだけです。これはTextMetrics、現在のフォントのサイズに関する詳細情報を提供するオブジェクトを完全にサポートし、さまざまなベースラインを作成できる唯一の一般的なブラウザーであるためです。

CanvasRenderingContext2D.measureText()オブジェクトを取得するために使用しTextMetricsます。詳細については、 MDN TextMetricsを参照してください。