イナヅマTVログ

【Canvas練習ノート】星(Star)を描く

| 0件のコメント

canvas上に星を描く練習です。

beginPath, closePath 間に星の頂点に対し lineTo することで星型(Star)が描けます。
頂点移動は三角関数を使えば可能です。
可能ですが、ボンクラ脳ではさっぱりなのでGoogle大先生に助けて頂くことにしました。
便利な世の中です。

stackoverflowで見つけることがました。
Algorithm for drawing a 5 point star

他にLarry Spencerさんのブログ記事を見つけました。
How to Draw a Star with HTML5
Larry Spencerさんのコードは頂点数を任意に設定でき、内接円の半径を変えることも可能です。
一番使いやすそうなので参考にさせて頂きました。

外接円、内接円を描いています。
赤:外接円
青:内接円

頂点数:5
星
5頂点の星形の場合は内接円の半径を外接円半径の 47.5% 位に設定したときプロポーションが良さそうでした。

内接円の半径を変えると形状が違う星を描くことが可能です。
頂点数:5
内接円:外接円の40%
星

頂点数:9
内接円:外接円の70%弱
星

動くのも作ってみました。
Demo
boids star

星はパスが複雑なせいか描画にかなり負荷がかかるようです。

コメントを残す