来画画吧 BY HTML5 <canvas>

好困呀,来写篇博客吧。决定以后经常写短篇,有时间的时候再将其整理。

今天就来画个画吧,一幅渐变的彩图,没错,拥有神奇的渐变效果。主要的工具就是HTML5的canvas API了,canvas的意思就是画布,在网页上本是一片无色透明的区域。

Nothing means everything.

像下面这样,我们定义了一张画布,Size: 400*300。

<canvas id="canvas" width="400" height="300"></canvas>

那这块布是铺上了,现在我们要取得控制权,To Be A Painter!(写入js文件)

var canvas = document.getElementById(id);
if (canvas == null) {
	return false;
}
var context = canvas.getContext('2d');

Nice! 现在就可以拿起画笔尽情挥洒了。我们有铅笔,可以画出图形来:

context.stroke();

我们还有颜料,给图形填充上颜色:

context.fill();

我们还可以给我们的铅笔和颜料设定STYLE!比如这样:

context.fillStyle = '江南Style';

在canvas里画画有一些特别,首先你要拿透明的笔画出图形来,然后你可以用铅笔给他描出来,或者直接把颜料挥洒上去,其实也就这两个步骤哦。

明白了这些就要说到画渐变效果非常重要的东西——-LinearGradient对象。 什么是LinearGradient对象,我也不知道啊,就是画线性渐变用的,人家给你准备好了用就行了。

现在开始用它。首先创建这个对象:

g1 = context.createLinearGradient(xStart, xEnd, yStart, yEnd);

然后进行颜色设定:

g1.addColorStop(offset, color);

offset就是偏移量,范围0-1,你指定这其中一个点,说说想让它是什么颜色。

最后填充:

context.fillStyle = g1;
context.fill();

是不是很简单。下面是完整的绘画过程,欣赏一下你的大作吧。

<script>
	function draw(id) {
		//get canvas context
		var canvas = document.getElementById(id);
		if (canvas == null) {
			return false;
		}
		var context = canvas.getContext('2d');
		//begin to draw
		var g1 = context.createLinearGradient(0, 0, 0, 300);
		g1.addColorStop(0, 'rgb(255, 255, 0)');
		g1.addColorStop(1, 'rgb(0, 255, 255)');
		context.fillStyle = g1;
		context.fillRect(0, 0, 400, 300);
		var n = 0;
		var g2 = context.createLinearGradient(0, 0, 300, 0);
		g2.addColorStop(0, 'rgba(0, 0, 255, 0.5)');
		g2.addColorStop(1, 'rgba(255, 0, 0, 0.5)');
		for (var i=0; i<10; i++) {
			context.beginPath();
			context.fillStyle = g2;
			context.arc(i*25, i*25, i*10, 0, Math.PI*2, true);
			context.closePath();
			context.fill();
		}
	}
</script>

canvas sample