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
星はパスが複雑なせいか描画にかなり負荷がかかるようです。