JavaScriptでHTML5のSVGのCircle上に多角形Polygonを描画する

今回は、HTML5 SVG のcircle上に等間隔で点描した際の座標を
配列に格納し、すべての点をつないでpolygonとして描画しています。

座標計算や配列への格納、文字列への追加など、基本的な部分もあまり省略せずに(冗長に)書き記してあります。

  • 配列、文字列を明示的に生成(明示せずにpushや+するとうまくいきませんでした)
  • pushを使い配列に追加していく
  • +演算子を使い文字列に追加していく
  • 各点を配列に→1つの文字列に→ポリゴンの描画


↓以下が実際のソースサンプルです。

▼JavaScript


▼CSS


▼HTML

角形

デモページは、こちら