4/08/2010

Illustrator のような二次ベジェ曲線で角丸の四角や微妙な円を描く(quadraticCurveTo) [html5 の Canvas を使ってみる:第卅七回]

bezierCurveTo(); では、三次ベジェ曲線を描いてみたが、次に quadraticCurveTo(); で二次ベジェ曲線を描いてみる。

★html 側
<canvas id="quadraticCurveTo"></canvas>


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

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


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


次に、左のアンカーポイントの先っちょを x:30 にずらしてみたらどうなるかやってみた。
c.quadraticCurveTo(30, 20, 100, 100);



さらに、同じく左のアンカーポイントの先っちょを y:150 にずらしてみたらどうなるか。
c.quadraticCurveTo(50, 150, 100, 100);



さて、角丸の四角をこの quadraticCurveTo(); を使って描ける。幅も高さも 100px の正方形の角を 10px 分丸めるとすると、角を quadraticCurveTo(); で描画するので、直線部分である 80px 分を lineTo(); で描画することになる。
// 描画をすることを宣言
c.beginPath();
// 筆おろしの座標を x:10、y:0 に定義
c.moveTo(10, 0);
// lineTo(); で x:90、y:0 へ直線を描画
c.lineTo(90, 0);
// x:100、y:0 を座標とするアンカーポイントを持つ、
// x:100、y:10 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 0, 100, 10);
// lineTo(); で x:100、y:90 へ直線を描画
c.lineTo(100, 90);
// x:100、y:100 を座標とするアンカーポイントを持つ、
// x:90、y:100 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 100, 90, 100);
// lineTo(); で x:10、y:100 へ直線を描画
c.lineTo(10, 100);
// x:0、y:100 を座標とするアンカーポイントを持つ、
// x:0、y:90 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 100, 0, 90);
// lineTo(); で x:0、y:10 へ直線を描画
c.lineTo(0, 10);
// x:0、y:0 を座標とするアンカーポイントを持つ、
// x:10、y:0 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 0, 10, 0);
// これらの座標に対して線を引く指令
c.stroke();



最後に、quadraticCurveTo(); を 4 回使って、微妙な円を描いてみる。
// 描画をすることを宣言
c.beginPath();
// 筆おろしの座標を x:50、y:0 に定義
c.moveTo(50, 0);
// x:100、y:0 を座標とするアンカーポイントを持つ、
// x:100、y:50 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 0, 100, 50);
// x:100、y:100 を座標とするアンカーポイントを持つ、
// x:50、y:100 までの二次ベジェ曲線を描画
c.quadraticCurveTo(100, 100, 50, 100);
// x:0、y:100 を座標とするアンカーポイントを持つ、
// x:0、y:50 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 100, 0, 50);
// x:0、y:0 を座標とするアンカーポイントを持つ、
// x:50、y:0 までの二次ベジェ曲線を描画
c.quadraticCurveTo(0, 0, 50, 0);
// これらの座標に対して線を引く指令
c.stroke();



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

W3C;
4.8.11 The canvas element — HTML 5

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.