canvas学习（七）：渐变

canvas中的渐变分两种：线性渐变和径向渐变，线性渐变又分为倾斜渐变、水平渐变和垂直渐变，径向渐变又称为放射状/环形的渐变。

线性渐变效果图：

径向渐变效果图：

代码如下：

var window_width = document.documentElement.clientWidth-20;
var window_height = document.documentElement.clientHeight-20;

window.onload=function(){
	var myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		myCanvas.width = window_width;
		myCanvas.height = window_height;
		var context =myCanvas.getContext("2d");
		//绘制线性渐变
		drawLinearGradient(context,1);
		//绘制径向渐变
		//drawRadialGradient(context);
	}else{
		return false;
	}
}

/**
*该方法用来绘制线性渐变图形
*@param cxt:canvas的上下文环境
*@param flag2:1-倾斜渐变 2-水平渐变 3-垂直渐变
*/
function drawLinearGradient(cxt,flag2){
	//1、创建一个线性渐变，范围从0、0到画布的宽和高，也就是整个画布都渐变
	//createLinearGradient(param1,param2,param3,param4):param1:渐变开始点的 x 坐标,param2:渐变开始点的 y 坐标,param3:渐变结束点的 x 坐标,param4::渐变结束点的 y 坐标
	var linearGrad = null;
	switch(flag2){
		case 1:linearGrad = cxt.createLinearGradient(0,0,window_width,window_height);break;//倾斜
		case 2:linearGrad = cxt.createLinearGradient(0,0,0,window_height);break;//水平
		case 3:linearGrad = cxt.createLinearGradient(0,0,window_width,0);break;//垂直
	}

	//2、规定渐变对象中的颜色和停止位置
	//addColorStop(stop,color):stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置;color:在结束位置显示的 CSS 颜色值
	linearGrad.addColorStop(0,"white");
	linearGrad.addColorStop("0.25","yellow");
	linearGrad.addColorStop("0.5","green");
	linearGrad.addColorStop("0.75","blue");
	linearGrad.addColorStop(1,"black");//若渐变范围没有铺满整个画布，那么没有铺满的颜色用最后这个颜色填充

	//3、填充画布
	cxt.fillStyle=linearGrad;
	//4、绘制图形
	cxt.fillRect(0,0,window_width,window_height);
}

/**
*该方法用来绘制径向渐变图形
*@param cxt:canvas的上下文环境
*/
function drawRadialGradient(cxt){
	//1、创建一个径向渐变，即放射状/环形的渐变，
	//createRadialGradient(param1,param2,param3,param4,param5,param6):param1:渐变的开始圆的 x 坐标,param2:渐变的开始圆的 y 坐标,param3:开始圆的半径,param4:渐变的结束圆的 x 坐标,param5:渐变的结束圆的 y 坐标,param6:结束圆的半径
	var R1 = window_width>window_height?window_height/2:window_width/2;
	var R2 = R1/4;
	var radialGrad = cxt.createRadialGradient(window_width/2,window_height/2,R2,window_width/2,window_height/2,R1);
	
	//2、规定渐变对象中的颜色和停止位置
	//addColorStop(stop,color):stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置;color:在结束位置显示的 CSS 颜色值
	radialGrad.addColorStop(0,"white");
	radialGrad.addColorStop("0.25","yellow");
	radialGrad.addColorStop("0.5","green");
	radialGrad.addColorStop("0.75","blue");
	radialGrad.addColorStop(1,"black");//若渐变范围没有铺满整个画布，那么没有铺满的颜色用最后这个颜色填充

	//3、填充画布
	cxt.fillStyle=radialGrad;
	//4、绘制图形
	cxt.fillRect(0,0,window_width,window_height);
}