[jQuery] JCanvasで四角形を描く (drawRect())
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を指定するとドラッグ可能になります。 |
他にも指定可能なオプションはあります。
配布元のサンドボックスで試してみてください。
ディスカッション
コメント一覧
まだ、コメントがありません