绘制渐变图形

绘制线性渐变：

fillStyle方法在填充的时候指定填充的颜色，这个方法除了可以指定颜色之外还可以用来指定填充的对象；渐变是指在填充的时候从一种颜色过渡到另一种颜色；

        线性渐变，需要用到LinearGradient对象，使用图形上下文对象的createLinearGradient方法创建该对象，这个方法的定义如下所示

context.createLinearGradient(xStart,yStart,xEnd,yEnd);这个方法使用了四个参数，分别为渐变起始地点的横坐标，渐变起始地点的纵坐标，渐变结束地点的横坐标，渐变结束地点的纵坐标

       使用addColorStop方法进行设定渐变的颜色，这个方法使用了两个参数，offSet和color;offSet是所设定的颜色离开渐变起始点的偏移量，这个参数的值是一个0-1之间的浮点值，渐变起始地偏移量是1，这个方法的定义如下：contex.addColorStop(offset,color);因为是渐变，所以至少需要使用两次addColorStop方法以追加两个颜色（开始颜色和结束颜色），可以追加多个颜色，例如从蓝色渐变到白色然后渐变到绿色，蓝色起始点的坐标到白色起始点的坐标之间的距离与白色起始点坐标到绿色起始点坐标的距离相等，这个时候蓝色的位移量是0，白色的位移量是0.5，绿色的位移量是1；然后fillStyle设定为LinearGradient对象，然后执行填充的方法，就可以绘制出渐变图形。

绘制线性渐变的例子：

<script type="text/javascript">
	function draw(id)
	if(canvas==null)
		return false;
	var context=canvas.getContext('2d');
	var g1=context.createLinerGradient(0,0,0,300);
	//使用线性渐变的时候使用这个方法创建对象，使用四个参数，他们的作用分别是渐变起始地点的横坐标，
	//渐变起始地点的纵坐标，渐变结束地点的横坐标，渐变结束地点的纵坐标
	g1.addColorStop(0,'rgb(255,255,0)');
	g1.addColorStop(1,'rgb(0,255,255)');
	context.fillStyle=g1;
	//填充的样式，在该属性中填入填充的颜色值
	context.fillReact(0,0,400,300);
	//图形边框的样式，在该属性中填入边框的颜色值
	var n=0;
	var g2=context.createLinerGradient(0,0,300,0);
	g2.addColorStop(0,'rgba(0,0,255,0.5)');
	//可以追加渐变的颜色，一个参数是所设定的颜色离开渐变起始点的偏移量，这个参数的值是一个范  围在0-1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量是1，color是所绘制的颜色
	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,9,Math.PI*2,true)；
		context.closePath();
		context.fill();
	}
</script>

绘制径向渐变：

      径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式，譬如在描绘太阳的时候，沿着太阳的半径方向向外扩散出去的光晕，就是一种径向渐变；使用图形上下文对象的createRadialGradient方法绘制径向渐变，方法的定义是context.createRadialGradient(xstart,ystart,radiusStart,xEnd,yEnd,radiusEnd),使用了六个参数，作用分别是渐变开始圆的圆心，渐变开始圆的圆心纵坐标，开始圆的半径，渐变结束圆的圆心横坐标，渐变结束圆的圆心纵坐标，结束圆的半径

     在这个方法中，指定了两个圆的大小和位置，从第一个圆的圆心处向外进行扩散渐变，一致扩散到第二个圆的外轮廓处，在设定颜色的时候和线性渐变是一样的，使用addColorStop方法进行设定即可，同样也需要设定0-1之间的浮点数来作为渐变转折点的偏移量。