[jQuery] JCanvasで円を描く (drawArc(),drawEllipse())

JqueryjCanvas

超シンプルなスクリプトで描けてしまいます。

メソッド

drawArc()を使います。

基本的な描き方

$('canvas').drawArc({
  strokeStyle: '#000',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
});

以上です。

詳細は以下をご覧ください。

基本的なオプション

オプション名説明 (※は必須)
radius円の半径を指定
fillStyle塗りつぶし色を指定 (px) ※ strokeStyle とどちらかが必須
strokeWidth線の太さを指定 (px) ※ fillStyle とどちらかが必須
strokeStyle線の色を指定 ※ strokeWidthを指定する場合は必須
x,y図形の座標を指定 (int) 0以下を指定するとキャンバス要素に表示されません

位置指定の注意

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

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

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

その他の円の描き方

drawArc()以外でも円を描くことができます。

drawEllipse()

楕円のためのメソッドですが、縦横に同じ数値を指定することで円が描けます。

$('canvas').drawEllipse({
  fillStyle: '#c33',
  x: 150, y: 100,
  width: 100, height: 100
});

drawEllipse()の場合、width,heightを指定します。その他はdrawArc()と同じです。

応用

drawArc()を使って弧を描くこともできます。

メソッド名から推測するには本来は弧を描くためのメソッドかもしれません。

startとendで角度を指定します。

$('canvas').drawArc({
  strokeStyle: '#000',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
start:0,end:90
});

上記のようにstartに0、endに90を指定することで時計の0時から3時の間の弧を描けます。

この弧にfillStyleを適用しても円の4分の一を塗りつぶしてくれるような結果にはならないのでご注意を。

下図の赤い部分がfillStyleで塗りつぶされた箇所になります。

JqueryjCanvas