[HTML5] Canvasで描画するテキストの高さと横幅を取得して、上下左右中央に表示する - YoheiM .NETこんにちは、@yoheiMuneです。 久しぶりにHTML5 Canvasを触ったので、それに関するブログを書きたいと思います。 HTML5 Canvasでテキストを描画する際に、上下左右中央に表示するのは大変？ 最近、自分のポートフォリオサイトを作り始めました。 TopページにHTML5 Canvasを使って、文字をページの真ん中に表示するように作っています。 Canvasでテキストを表示したのは、色々とアニメーションさせたかったからで、 ページの真ん中にテキストを表示するのが案外面倒だったので、その方法をブログに残しておきたいと思います。 テキストを左右中央に表示する テキストを左右中央に配置するのは簡単です。 以下のどちらかの方法で、左右中央に表示することが出来ます。 実装方法１：textAlignを利用する（オススメ） １つ目の方法は、textAlignをcenterに指定すること
![[HTML5] Canvasで描画するテキストの高さと横幅を取得して、上下左右中央に表示する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/0d3fe9c4e421e05d85b6534931af13960750376e/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F245.jpg)
