Canvasに複数行のテキストを中央揃えで整列させる方法
概要
Canvasに複数行の文字列を描画する際に、水平・垂直共に中央揃えにする方法。
垂直方向については複数の整列方法を紹介。
共通の値
コード
基本：1行の場合
DEMO
コード
複数行(余白均等, space-evenly)
各テキスト間の余白が均等になるように配置する。
DEMO
コード
複数行(余白独立, space-around)
各テキストの持つ余白が均等になるように配置する。
DEMO
コード
複数行(等分位置)
垂直方向の位置がCanvasの高さを等分した位置になるように配置する。
DEMO
コード
複数行(中央寄せ)
全てのテキストを垂直方向中央に密集させるように配置する。
また、gap指定によって行間の広さを調整する。