Rectangles 矩形

A rectangle in jCanvas is, essentially, a rectangle of any width or height.
jCanvas中的矩形，实质上是任意宽高的矩形。

Basic Usage 基本用法

You can draw a rectangle using the drawRect() method. The size of a rectangle is determined by its width and height properties.
你可以使用drawRect()方法画一个矩形，矩形的面积取决于它的width和height属性。

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

Positioning 定位

The fromCenter property (used above) determines if a rectangle's x and y properties lie at its center (as opposed to its top-left corner). This property is true by default.
fromCenter属性（上边用过了）决定了矩形的x和y属性是否位于其中心（否则就是在左上角），这个属性默认为true。
For example, consider the following rectangles. They both have the same x and y property values, but only one has its fromCenter property set to false.
例如，思考下边的矩形，它们都有相同的x``y属性值，但只有一个的fromCenter属性设置成了false。

$('canvas').drawRect({
  fillStyle: '#c33',
  x: 100, y: 60,
  width: 100,
  height: 80
});
$('canvas').drawRect({
  fillStyle: '#6a6',
  x: 100, y: 60,
  width: 100,
  height: 80,
  fromCenter: false
});

If you want to make fromCenter false by default for all shapes, do so using the $.jCanvas.defaults object.
如果你想让fromCenter默认对所有形状都为false的话，使用$.jCanvas.defaults对象就行了。

$.jCanvas.defaults.fromCenter = false;
$('canvas').drawRect({
  fillStyle: '#6a6',
  x: 100, y: 60,
  width: 100,
  height: 80,
  fromCenter: false
});

Rounded Corners 圆角

You may round the corners of a rectangle using the cornerRadius property.
你可以使用cornerRadius属性将矩形的角变圆。

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

$('canvas').drawRect({
  strokeStyle: '#c33',
  strokeWidth: 4,
  x: 150, y: 100,
  width: 200,
  height: 100,
  cornerRadius: 10
});