HTML-in-Canvas でモーションタイポグラフィ、その 2
Chrome / Edge 157 以降で利用できる API を使用
HTML-in-Canvas でモーションタイポグラフィを作る、2 回目だ。HTML-in-Canvas の仕組みと対応状況は、前回の記事（下の関連リンク）にまとめた。
前回は、画面の中央に 1 語を置いて崩した。今回は同じ語を何行も並べて画面を埋め、並べた面ごと崩している。
デモ
前回と同じく、語はその場面の動きそのものを指している。黒地と白地の場面が交互に来る。
- SQUEEZE：行を縦の細い帯に分け、帯の幅を変える。膨らんだ部分が、まわりの文字を押しつぶしながら左右に跳ぶ。
- STEP：行を横の帯に切り、帯ごとに横へずらして階段にする。行ごとに傾く向きが逆なので、全体がジグザグになる。
- SPLIT：画面を斜めの線で 2 つに割り、切り口に沿って逆向きにずらす。
- WAVE：縦の細い帯を上下に動かし、波を左から右へ通す。
- BLINDS：横の帯を、上から順にブラインドのように裏返す。裏返った帯は上下が逆さで、少し暗い。
- REPEAT：行が 1 行から 3 行、7 行と増え、行ごとに逆向きに流れる。
- MIRROR：行ごとに縦の軸を置き、軸より右に、左側を折り返した像を描く。
- AROUND：行を曲げて同心円の輪にし、回してから、まっすぐに戻す。
作ってみてわかったこと
組んだ文字を最初に一度だけ別の canvas に描いておき、そこから drawImage で帯を切り出す作り方は、前回と同じだ。今回は画面を埋めるぶん、1 フレームに描く帯の数が前回より多い。
黒地の場面では、文字を白に反転して描く。帯を描くたびに filter で反転すると、ブラウザが固まるほど重くなった。そこで最初に、白文字の控えと、ブラインドの裏側に使う暗い控えも作っておき、場面に合わせて切り出す控えを切り替えた。
文字を小さく縮めて描くと、輪郭がギザギザになった。drawImage で一度に 2 倍を超えて縮めると、この症状が出やすい。そこで控えを 1/2、1/4、1/8 に縮めた版も用意し、描く大きさに近い版から切り出した。
STEP では、帯の切れ目が文字の縁のすぐ近くを通ると、数 px の切れ端だけが隣の帯と一緒にずれて、線のように見えた。そこで控えの画素を読み、文字のインクが短く途切れない高さを探して切れ目を決めた。前回のデモでは、画面の canvas から getImageData で読むと極端に遅くなった。今回は画面とは別の普通の canvas から、レイアウトが変わったときに一度だけ読むので、動きは重くならなかった。
MIRROR では、軸を文字の境目で止めると、隣の文字の端が細い線になって残った。そこで、軸は文字の中心で止めることにした。文字の中心は、Range で 1 文字ずつ範囲を作り、getBoundingClientRect で位置を測って求めている。文字が HTML の要素として DOM に残っているので、ブラウザがレイアウトした 1 文字ごとの位置をそのまま使える。