利用＜canvas＞实现渐变功能。

• createLinearGradient(x,y,x1,y1); 创建线条渐变，x表示渐变开始的x坐标，y表示渐变开始的y坐标，x1表示渐变结束的x坐标，y1表示渐变结束的y坐标。

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

使用createLinearGradient()，创建一个线性渐变。

代码片段：

    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script type="text/javascript">
		//1.获取画布
		var canvas=document.getElementById("canvas");
		//2.创建画布上下文对象
		var context=canvas.getContext("2d");
		//3.beginPath()
		context.beginPath();
		//4.设置样式
		//创建渐变对象
		var linear=context.createLinearGradient(0,50,500,50)
		//添加渐变颜色
		linear.addColorStop(0,"red");
		linear.addColorStop(1,"green");
		//设置矩形的填充颜色
		context.fillStyle=linear;
		//填充渐变
		// context.fillStyle=grd;
		context.fillRect(10,10,600,300);
    </script>

效果图：