在第三章中（canvas学习总结三：绘制路径-线段）我们提高Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。
立即绘制图形方法仅有两个strokeRect(),fillRect(),两个方法都是用来绘制矩形的。
Canvas的API提供了如下三个方法，分别用于矩形的清除，描边与填充
- clearRect(x, y, w, h): 清除指定区域，使其为全透明
- strokeRect(x, y, w, h): 绘制一个描边的矩形
- fillRect(x, y, w, h): 绘制一个填充的矩形
我们先来看看基于路径的绘制矩形的方法
moveTo(), lineTo()
function drawRect(){
// 描边矩形
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.lineTo(200, 200);
ctx.lineTo(200, 200);
ctx.lineTo(20, 200);
ctx.lineTo(20, 20);
ctx.stroke(); //填充矩形
ctx.beginPath();
ctx.moveTo(220, 20);
ctx.lineTo(400, 20);
ctx.lineTo(400, 200);
ctx.lineTo(220, 200);
ctx.lineTo(220, 200);
ctx.lineTo(220, 20);
ctx.fill();
}
rect()绘制矩形
rect(x, y, w, h):绘制一个封闭的矩形路径
参数x, y 分别为矩形左上角的坐标，w, h 分别为矩形的宽高
function drawRect(){
ctx.beginPath();
ctx.rect(20, 20, 180, 180);
ctx.stroke();
ctx.beginPath();
ctx.rect(220, 20, 180, 180);
ctx.fill();
}
立即绘图函数
strokeRect(x, y, w, h): 绘制一个描边的矩形
参数x, y 分别为矩形左上角的坐标，w, h 分别为矩形的宽高
function drawRect(){
ctx.strokeRect(20, 20, 180, 180);
}
fillRect(x, y, w, h): 绘制一个填充的矩形
参数x, y 分别为矩形左上角的坐标，w, h 分别为矩形的宽高
function drawRect(){
ctx.fillRect(20, 20, 180, 180);
}
clearRect(x, y, w, h): 清除指定区域内的所有像素
参数x, y 分别为矩形左上角的坐标，w, h 分别为矩形的宽高
清除画布的方法
ctx.clearRect(0, 0, canvas.width, canvas.height);
绘制圆角矩形
在第五章中（canvas学习总结五：线段的端点与连接点）我们介绍了lineJoin属性 用来设置线的连接点的样式，因此我们可以绘制圆角矩形
function drawRect(){
ctx.lineWidth = 13;
ctx.lineJoin = 'round';
ctx.strokeRect(20, 20, 180, 180);
}
当然我们还可以使用lineJoin的其他属性值绘制不同方式的矩形。我们可以自己测试一下。
总结：
路径绘制矩形
moveTo(), lineTo()绘制路径,stroke()与fill()进行描边与填充
rect(x, y, w, h)顺时针绘制路径,stroke()与fill()进行描边与填充
立即绘制矩形
strokeRect(x, y, w, h): 绘制一个描边的矩形
fillRect(x, y, w, h): 绘制一个填充的矩形
