[jQuery] JCanvasで正多角形を描く (drawPolygon())

2019年7月16日JqueryjCanvas

ほんの少しの記述で正多角形を描画でき、非常に便利です。

Contents

メソッド

drawPolygon()を使用します。

$('canvas').drawPolygon({
  fillStyle: '#000',
  x: 100, y: 100,
  radius: 50,
  sides: 3
});

これだけで正三角形が描画できました。

指定したオプションについては次項をご覧ください。

オプション名	説明 (※は必須)
radius	正多角形の中心から角までの長さを指定します。 ※ 辺の長さではないので注意
sides	角の数を指定。 ※ 3以上の整数を指定。 3を指定すると正三角形になります。
fillStyle	塗りつぶし色を指定 (px) ※ strokeStyle とどちらかが必須
strokeWidth	線の太さを指定 (px) ※ fillStyle とどちらかが必須
strokeStyle	線の色を指定 ※ strokeWidthを指定する場合は必須
x,y	図形の座標を指定 (int) 0以下を指定するとキャンバス要素に表示されません

図形の中心が基準になります。

x:0,y:0はキャンバス要素の左上になります。※省略した場合も同様です。

x:0,y:0を指定すると図形の中心位置がキャンバス要素の左上になります。よって正多角形の右下(右下四分の一)しか表示されませんので注意が必要です。

オプション名	説明
shadowColor	影をつけます。
shadowBlur	影のぼかし範囲を指定します。 ※ shadowColorを使用する場合は必須です。
draggable	キャンバス内でのドラッグ可否の設定規定値：false Trueを指定するとドラッグ可能になります。

他にも指定可能なオプションはあります。

配布元のサンドボックスで試してみてください。

2019年7月16日JqueryjCanvas