Canvas中的矩形

在canvas的世界里，只有一种基本图形——矩形，听起来很难以想象啊，复杂的图形怎么办呢？很多时候复杂问题总有简单的解法的。杀手锏就是路径，用路径和路径组合就可以绘制出相当复杂的图形，很浓重的矢量味道噢。像在 Illustrator 这类矢量设计软件里，路径就是一切的基础。是不是意味着，canvas 同样是矢量世界呢？

还是先搞定仅有的一种基本图形吧。最简单不过下面三个函数：

// 绘制一个方块
fillRect(x,y,width,height)

// 绘制一个矩形轮廓
strokeRect(x,y,width,height)

// 清出一个透明的矩形区域
clearRect(x,y,width,height)

其中x,y是矩形区域左上角的位置。

function draw() {
	var canvas = document.getElementById('myCanvas');;
	
	if (canvas.getContext) {
		var ctx = canvas.getContext('2d');
		
		ctx.fillRect(15, 15, 120, 120);
		ctx.clearRect(40, 40, 70, 70);
		ctx.strokeRect(45, 45, 60, 60);
		ctx.strokeRect(50, 50, 50, 50);
	}
}

代码可以放在 进驻Canvas 里曾经用过页面模板里执行。

在 canvas 上，首先填充了一个 120×120 的黑色（默认色）方块，清出中间并在其内勾画出双边矩形，看上去和右边的图形是一致的。

是由点组成的，但一开始就绘制面了，那么如何绘制点呢？其实，屏幕上的像素点也是一个矩形，画一个 1×1 的矩形就是点了。用 fillRect 和 strokeRect 都可以，但是有一点区别，fillRect 可以准确的填充出一个像素点，而用 strokeRect 则可以得到一个视觉上的点，边缘是模糊的。同样，如果希望矩形块的边缘是锐利的，使用 fillRect 而不是 strokeRect 。