Canvas画矩形

	<canvas id="myCanvas" width="200" height="100">你的浏览器不支持HTML5</canvas>

	<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		ctx.lineWidth = 5;
		ctx.strokeStyle = "red";
		ctx.beginPath();
		ctx.strokeRect(10,10,70,40);
	</script>

也可以用下面代码来替换strokeRect函数，它可以实现同样的功能：

ctx.rect(10,10,70,40);
ctx.stroke();

2. 绘制实心的矩形

<canvas id="myCanvas" width="200" height="100">你的浏览器不支持HTML5</canvas>

	<script type="text/javascript">
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		ctx.fillStyle = "red";
		ctx.beginPath();
		ctx.strokeRect(10,10,70,40);
	</script>

当然这里可以用另一种实现方法绘制矩形，代码如下：

ctx.rect(10,10,70,40);
ctx.fill();