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);
	}
}

Rectangle in canvas

Rectangle in canvas

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

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

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