ストロークベース文字描画（ベジエ）
Stroke-Based Character Rendering (Bézier)
書き順の美しさを、1画ずつ紐解く試み
綺麗な描かれた文字にはちゃんと理由があります。
それは、ただ形を真似るのではなく、正しい筆順で書くことによって、線の流れや文字全体のバランスが自然に整うからです。
筆順は美しさの基盤であり、リズムや呼吸、重心の取り方までを導いてくれます。
このデモでは、1画ごとの動きをベジエ曲線で可視化し、筆の運びがどのように美しさを生むのかを体感できます。
書とは、「描く」のではなく「運ぶ」もの――その本質を、1画ずつ紐解いていきます。
1. ストロークアニメーション・デモ（大谷翔平/花鳥風月）
書かれる瞬間を、文字で感じる
「花鳥風月」と「大谷翔平」の漢字を、Canvas上にストローク順で描画するデモです。
ボタンで「文字単位」または「ストローク単位」の描画モードを切り替え可能。
ストローク番号の表示や、描画速度・線の太さも自在に調整できます。
すべての筆順データはベジェ曲線で構成され、筆のリズムがそのまま可視化されています。
主な機能
・2種の文字セット（花鳥風月／大谷翔平）を選択可能
・文字単位 or ストローク単位の描画モード
・ストローク番号表示のオン／オフ
・描画速度スライダー（50ms～1000ms）
・線の太さスライダー（1px～8px）
2. 可変幅ストローク・フォントのベクトル描画
漢字「大」の3画を、1ストロークずつ丁寧に描画するアニメーションデモです。
各ストロークにはベジェ曲線が用いられ、筆の流れがリアルに再現されます。
さらに、始点・終点・制御点をドラッグで移動させて編集が可能です。
主な機能
・ストローク順に描かれる文字幅を有したアニメーション。
・始点と終点単位で文字幅の変更。
・始点・終点・制御点のドラッグ編集。
・
ベクターデータそのものを描画するキャンバスを実装しています。上のラスター化するキャンバスと異なり、大きく拡大してもラインは滲まず綺麗です。