デモの使い方

マウスドラッグの軌跡を二次ベジェ曲線で繋いで、キャンバスに滑らかな曲線を描けるお絵かきデモです。

お絵かき スプライン補間 Canvas描画

操作手順

  1. キャンバス上でマウスを押し込んでドラッグを開始
  2. カーソルを動かしてマウスの軌跡に沿った滑らかな曲線を描く
  3. マウスを離してストロークを終了し、再度ドラッグで続きを描く

活用シーン

  • 手書きメモや図解用ホワイトボード機能のプロトタイプ
  • 二次ベジェ曲線によるスムージング描画の学習
  • mousedown/mousemove/mouseupによる描画イベント処理の実装例
Draw smooth curves