Illustrator のような三次ベジェ曲線を描く(bezierCurveTo) [html5 の Canvas を使ってみる：第卅六回]

bezierCurveTo(); では、Illustrator のような三次ベジェ曲線を描けるらしい。

★html 側

<canvas id="bezierCurveTo"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: bezierCurveTo で 2 次元描画を行うことの定義
  var c = document.getElementById("bezierCurveTo").getContext('2d');

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:100 に定義
  c.moveTo(0, 100);
// x:20、y:20 を座標とするアンカーポイントと、
// x:80、y:20 を座標とするアンカーポイントを持ち、
// x:100、y:100 までの三次ベジェ曲線を描画
  c.bezierCurveTo(20, 20, 80, 20, 100, 100);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。上記で指定したアンカーポイントの座標に向かう赤い補助線も引いてみた。


次に、左のアンカーポイントの先っちょを x:50 にずらしてみたらどうなるかやってみた。

c.bezierCurveTo(50, 20, 80, 20, 100, 100);

最後に、左のアンカーポイントの先っちょを y:150 にずらしてみたらどうなるか。

c.bezierCurveTo(20, 150, 80, 20, 100, 100);

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5