§09-23Forms
署名 (canvas)
画面上に指やマウスで手書きの署名を描く。
紙に書くのと同じ動作で署名を残し、契約や受領の確認を画面上で完結させる。印刷と郵送を省きたい申込みや受け取りの場面に向く。
実装のポイント
Pointer Events で描画し setPointerCapture で枠外でも線を途切れさせない。CSS 上のサイズと canvas の解像度を devicePixelRatio に合わせて座標を変換する。
- 特徴
- ブラウザ API
- ジェスチャー
- デモで使っているもの
- shadcn/ui
- lucide-react
- requestAnimationFrame
- Canvas 2D
- Pointer Events