html - html5キャンバス要素のテキストの高さを測定する

Question

テキストがキャンバスにレンダリングされる場合は、context.measureTextを使用してテキストの幅を取得できることを知っています。同じことをするが、テキストの高さを取得する方法はありますか？

考えてみてください。テキストを90Deg回転させてから、幅をテストできるかもしれません。...

score 5 · Accepted Answer

私は同じ問題を抱えていましたが、私が見つけたのはこれです。文字列からフォントサイズを取得します。理由はわかりませんが、Proprety を PX ではなく PT に設定した場合にのみ機能します。

ctx.font="20px Georgia"; // This will not work.
ctx.font="20pt Georgia"; // This is what we need.

次に、そこから値を取得します。

var txtHeight = parseInt(ctx.font);

これで、テキストの高さが決まりました。私が言ったように、私の側では、PTのサイズをPXとして設定する必要がありました

score 1 · Accepted Answer

キャンバスのフォントサイズをピクセル単位で設定し、テキストボックスの高さとして使用できるようにする必要があります。ただし、これを行うようになったとき、正確な値を取得するには、ピクセルの高さに約 50% を追加する必要があることがわかりました。

var textHeight = fontSize * 1.5;

それが十分でない場合は、ここで概説されているいくつかのかなり本格的なソリューションがあり、そのうちの 1 つはメソッドを使用してgetImageData垂直ピクセル数をカウントします。

3 に答える 3