canvasでいろいろ文字配置する方法

javascriptを使ってcanvasで文字列を変形する方法を模索していました。

縦書き

参考にしたサイトはこちら。
tmlife.net

こちらのサイトの方法では括弧（「、」、『、』）や線（ー、～）などがそのまま表示されてしまうのでこの辺りの対策を自分で付け加えました。

コードはこちら。

こんな感じに表示されます。

縦書きに関してはｇｇってみたらすぐに情報が出てきたので比較的楽に実装できました。

円弧

canvasで文字列を円弧状に配置します。

縦書き以外はあまり参考になるサイトがありませんでした。なんというか、図形で色々やっている方はいるのですが、文字列でやる方はあまり居ないようです。

コードはこちら。

やることは円を描くときとあまり変わりません。線を描かずに角度だけ変えて、そのたびに文字を描画するだけです。

円弧状に配置したいので、描画する場所は135度~45度です。canvas上での角度の指定はちょっとややこしいので非常にめんどくさい。

当然ですが円の半径は文字数によって変わります。
逆円弧の場合は色々逆にするだけです。

文字数が極端に少ないとき（4文字以下ぐらい）は配置が崩れます。必要に応じて文字間を大きくするなどしなければいけないかもしれません。

アーチ

canvasで文字列をアーチ型に配置します。思っていたよりも苦労しませんでした。

コードはこちら。

一文字ごとに変換マトリックスを使うことで良い感じになりました。

苦労した点を敢えて上げるとすると、一文字ごとの傾斜率を出すアルゴリズムを作ることでしょうか。 

逆アーチの場合はやっぱり諸々を逆にするだけです。

上弦型

canvasで文字列を上弦状に配置します。一番苦労しました。

図形であってもcanvasでは台形状に拡大することはできません。ですが、工夫すればそれっぽく見せることはできます。
oldmist.html.xdomain.jp 

四角形を対角線で2つに分け、それで出来た2つの三角形をそれぞれ変形することで台形っぽくみせることが出来ます。

とりあえずと思って当てはめてみただけすが、案外悪くないような、そうでもないような...

でも文字ごとに色々数値を変えなければならないので、その辺のアルゴリズムを考えるのが億劫過ぎてひとまず別の案を考えることにしました。

その結果出来上がったものがこちら。

文字数を増やすともっとそれっぽくなります。

やっていることは意外と単純です。文字ごとにy軸の倍率を変えて、若干傾斜させているだけです。

やっていることは単純ですが、倍率を出すのに結構苦労しました。
最初は radius * sinθ で倍率を出していたのですが、これだと文字の大きさが直線的になってしまいます。これでは上弦とは言えません。

そこで行きついたのがベジェ曲線です。

ベジェ曲線はcanvas上で簡単に描画することができます。
www.htmq.com

ですが、これを使うとあるx座標におけるy座標を出すことができません。そこでベジェ曲線の公式を使います。

こちらのサイトを参考にさせて頂きました。
qiita.com

今回の場合、ベジェ曲線の頂点以外の2点のy座標を0として考えることができるため、公式はもっと単純になります。

y = 2*(1-t)*t*max_size

t=0 のときに曲線の左端、t=1のときに曲線の右端になります。どうやらxの値は関係無いようです。

下弦は諸々を逆にするだけです。

注意点として、文字列の倍率をy方向にいじるとブラウザによる差が大きくでます。そのため、文字の下部分で揃えるときはブラウザごとに数値を設定する必要があります。

私が作ったものはchromeに合わせています。

canvasの使い方が結構分かったような気がします。いい勉強になりました。