如果不指定颜色，默认的是使用黑色去填充整个矩形。可以使用fillStyle方法为矩形指定颜色或其他样式，比如可以充分利用CSS 3中的opacity透明度属性，比如如下的代码，分别画了三个矩形，每个矩形的下半部分都使用了样式形成了半透明效果：
context.fillRect(5, 5, 145, 145);
context.fillStyle = “rgb(0, 162, 232)”;
context.fillRect(40, 55, 145, 145);
context.fillStyle = “rgba(255, 0, 0, 0.2)”;
context.fillRect(75, 105, 145, 145);
context.fillStyle = “rgb(0, 162, 232)”;
context.fillRect(40, 55, 145, 145);
context.fillStyle = “rgba(255, 0, 0, 0.2)”;
context.fillRect(75, 105, 145, 145);
其中rgba中比传统的rgb多了a，即透明度的含义，a的值也是0到1之间的数字，0表示完全透明，1则是完全不透明。运行结果如下图：
▲
接下来学习如何绘制圆(弧)，绘制用到的方法如下：
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画圆或者圆弧。x,y为圆心坐标，radius为半径，startAngle,endAngle为开始/结束划圆的角度，anticlockwise为是否逆时针画圆(True为逆时针，False为顺时针)。
注意这里的角度为弧度制，所以如果画一个正圆的话，是Math.PI * 2，而画60°的话，就是60 * Math.PI / 180，比如下面的代码，用fill样式填充了一个黑色的正圆：
context.beginPath();
context.fillStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 2 * Math.PI, true);
context.fill();
context.fillStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 2 * Math.PI, true);
context.fill();
如果要用stroke笔来勾画圆形的话，只需要指定勾画的样式strokeStyle即可，如下代码：
context.beginPath();
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 2 * Math.PI, true);
context.stroke();
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 2 * Math.PI, true);
context.stroke();
下面是一个画弧度的代码例子：
context.beginPath();
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 0.5 * Math.PI, true);
context.stroke();
context.strokeStyle = “rgb(0, 0, 0)”;
context.arc(123, 93, 70, 0, 0.5 * Math.PI, true);
context.stroke();
结果如下图：
▲
▲
