HTML5 Canvasで動かせる3次ベジェ曲線を描く

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
controllable-bezier-curve-on-html5-canvas

HTML5 のキャンバスでは bezierCurveTo メソッドを使ってベジェ曲線を描くことができます。

今回はこれを使って、Illustratorなどのベクトルソフトぽく、制御点を動かして、曲線を変形させられるようにしてみます。

スポンサーリンク

サンプル

先に動作サンプルからどうぞ。Firefox, Chromeで動作確認済み。
(このサイト、HTML5じゃないんですが、まぁ気にしないでください 笑)

けっこうグリグリ動かせていい感じですね!

解説

そんなにむずかしいことはありませんが、簡単にするためにベジェ曲線はBezierCurveクラスにまとめています。

コンストラクタで初期化したあとは、メインループからhitTestメソッドとdrawメソッドを呼び出しています。

ソースコード

JavaScript ソースコードの全文です。こちらからダウンロードすることもできます。

HTMLは例えばこんな感じでOKです。

最後までお読みいただきありがとうございました m(_ _)m

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存