HTML-in-Canvas でモーションタイポグラフィ、その 3

HTML-in-Canvas でモーションタイポグラフィを作る、3 回目だ。HTML-in-Canvas の仕組みと対応状況は、1 回目の記事（下の関連リンク）にまとめた。

作り方は前回と同じで、HTML で組んだ英単語を何行も並べて画面を埋め、canvas で切って動かしている。今回は 7 つの場面を作った。

デモ

語はその場面の動きそのものを指している。黒地と白地の場面が交互に来る。

• SHEAR：行ごとに左右交互に斜めに傾け、傾きを拍ごとに切り替える。
• DRIP：縦の細い帯ごとに、文字の下半分を下へ引き伸ばす。垂れ始める時刻と長さは列ごとに違い、だんだん速く伸びる。
• STRETCH：1 行だけを縦に伸ばして画面を占めさせ、ほかの行を薄く押しつぶす。伸びる行が上下に跳ぶ。
• GRID：文字を四角いマスに分け、マスを 90° ずつ回す。回る順番は左から右へ、戻りは右から左へ進む。
• STACK：行間を詰めて、全行をわずかにずらして重ねる。白と灰色の行が交互に重なり、層のように見える。
• CROSS：横の行の上に、90° 回した縦の列が開いて現れ、行と列が交互に上下になって織り目になる。
• ZOOM：中央の語の M の縦画へ寄っていき、画面が縦画の黒で埋まったところで白黒が反転し、行と行の間から引いて戻る。

作ってみてわかったこと

ZOOM では、画面全体を拡大して寄っている。寄る先は、中央の語の最後の文字 M の、左の縦画だ。M の位置は、Range で最後の 1 文字の範囲を作り、getBoundingClientRect で測った。そこから文字の控えの画素を読み、縦画の幅と長さを求めている。縦画で画面が黒く埋まった瞬間に、白黒を反転した面に切り替え、今度は行と行の間の黒から引いていく。切り替えの前後で画面がどちらも黒一色なので、つなぎ目が見えない。

寄っている間は、画面に入っている範囲の語だけを描いている。控えの選び方も、画面全体の拡大率を掛けて決めている。掛けないと、拡大して見ている文字を小さい控えから切り出すことになり、ぼやけてしまう。

CROSS の織り目は、描く順番で作った。まず横の行を描き、その上に縦の列を地の色ごと描いて、下の行を隠す。そのあと、行と列が交わるところのうち半分だけ、横の行を上に描き直す。これで、行と列が交互に上下になる。

DRIP では、帯の幅を 3px にした。帯が太いと、垂れた先が階段状に見えたからだ。

ソースコード

ソースコード（zip）67KB