[jQuery] JCanvasで四角形を描く (drawRect())

JqueryjCanvas

jCanvasでは色々なメソッドが用意されており、簡単な図形であれば簡単に描画できます。

その中でも基本的な四角形の書き方。

メソッド

drawRect() を使います。

基本的な描き方

$('canvas').drawRect({
  fillStyle: '#000',
  x: 150, y: 100,
  width: 200,
  height: 100
});

上記が基本的な書き方です。

縦100px,横200pxの塗りつぶし色の横長長方形が描画されます。

基本的なオプション

オプション名説明 (※は必須)
width図形の横幅を指定 ※
height図形の縦幅を指定 (px) ※
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を指定するとドラッグ可能になります。

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

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

https://projects.calebevans.me/jcanvas/sandbox/

JqueryjCanvas