XXX(x,y,width,height) x矩形左上角x坐标
y矩形左上角y坐标
width 矩形宽度
height 矩形高度
rect() 创建矩形 和stroke()与fill()一起使用
fillRect() 绘制“被填充”的矩形 和fillStyle属性一起使用，放在fillStyle属性后面
strokeRect() 绘制矩形（无填充） 和strokeStyle属性一起使用，放在strokeStyle属性后面
clearRect() 在给定的矩形内清除指定的像素
<canvas id="a" width="500" height="450" style="border:1px solid #000"></canvas>
<script type="text/javascript">
var a=document.getElementById("a");
var ctx=a.getContext("2d");
ctx.rect(20,20,150,100); //创建矩形
//ctx.stroke(); //绘制已定义的路径
ctx.fill(); //绘制当前绘图 ctx.fillStyle="red"; //设置或返回用于填充绘画的颜色、渐变或模式
ctx.fillRect(200,20,150,100); //绘制“被填充”的矩形 ctx.strokeStyle="blue"; //设置或返回用于笔触的颜色、渐变或模式
ctx.strokeRect(20,150,150,100); //绘制矩形（无填充） ctx.fillStyle="red"; //设置或返回用于填充绘画的颜色、渐变或模式
ctx.fillRect(200,150,150,100); //绘制“被填充”的矩形
ctx.clearRect(220,170,50,50); //在给定的矩形内清除指定的像素
</script>