HTML5 canvas要素とベジェ曲線の基礎を予習
Author: 秋葉秀樹 | Comments(0) | Trackback(0)JavaScriptでベジェ曲線を描いてみました。
ポイントとなるメソッドは「bezierCurveTo()」です。
最初に「moveTo()」で開始地点を決めて、あとは「bezierCurveTo()」で終点と、あいだのハンドル（愛用イラストレータで言う）の先端の2点を指定するだけで描けるから、わりと憶えやすいかもしれません。
「bezierCurveTo()」の書式はこのようになります。（イラストレータで使う用語を織り交ぜると・・・）
と、引数が6つもあります。
で、例えば以下のように書くと、
開始地点のアンカーポイントがX=0、Y=0で、終了地点のアンカーポイントがX=300、Y=300になります。
さらに、ハンドルをにょきっと移動させたと仮定して・・・
- 開始地点から伸びている方のハンドルの先のX=270とY=0が、第一引数と第二引数に。
- 終了地点から伸びている方のハンドルの先のX=20とY=300が、第三引数と第四引数に。
- 終点のX=300とY=300が、第五引数と第六引数に。
どうやら「beginPath()」を最初に書いてあげないと、例えば線を描いた後に丸を描く、などといった、別の図形を続けて描く時におかしな事になるので、書きます。「strokeStyle="#FF0000"」は、線の設定で、赤線を指定しています。
準備ができたら実際に線を描くために「stroke()」を使います、これを書かないと描画されません。 とりあえず下記のソースだけで曲線は描けます。