JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト

なかなか使いやすいEaselJSの多角形関数

EaselJSなどのフレームワークを使わない場合、多角形の描画は凄く面倒です。頂点を求めて線を引き、また次の頂点を求めて線を引く。この繰り返しです。あまりに面倒な為、canvasで正多角形を描く為のjsを自作している人も多いです。しかしこの自作jsを作ること自体が面倒ですね。EaselJSにはこの正多角形描画の為の関数がしっかり用意されていますので、有効活用しましょう。

drawPolyStar関数で多角形描画

それでは実際にコードを見てみましょう。サイズや頂点の数のほか、絞り、回転角なども指定できます。絞りというのは各頂点を結ぶ線間に作る谷の深さです。これのおかげで簡単に星等が描画できます。

//g.drawPolyStar(x座標,y座標,サイズ,頂点の数,絞り,回転角);

//五角形(絞りなし)
g.drawPolyStar(0, 0, 10, 5, 0, 0);

//六角形(絞り0.3)
g.drawPolyStar(40, 0, 30, 6, 0.3, 30);

//七角形(絞り0.5)
g.drawPolyStar(120, 0, 50, 7, 0.5, 90);

実行結果

3つの多角形を描いてみました。Blingな感じを出したりするのに使えそうですね。