1.绘制线性渐变
渐变的概念：渐变是指在填充时从一种颜色慢慢过渡到另外一种的颜色。绘制线性渐变时，需要使用到LinearGradient对象。使用图像上下文对象的createLinearGradient方法创建该对象。该方法的定义如下所示。context.createLinearGradient(xStart,yStart,xEnd,yEnd) 该方法使用四个参数，xStart为渐变起始地点的横坐标，yStart为渐变起始地点的纵坐标，xEnd为渐变结束地点的横坐标，yEnd为渐变结束地点的纵坐标。使用addColorStop方法绘制颜色
创建了一个使用两个坐标点的LinearGradient对象之后，使用addColorStop方法进行绘制颜色，该方法的定义如下所示。context. addColorStop(offset,color) 该方法使用两个参数——offset和color。Offset为所
设定的颜色离开渐变起始点的偏移量。该参数的值是一
个范围在0到1之间的浮点值，渐变起始点的偏移量为0
，渐变结束点的偏移量为1。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>绘制线性渐变</title>
<script >
function draw(id) {
var context = document.getElementById('canvas').getContext('2d');
var lingrad = context.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, 'black');
lingrad.addColorStop(1, 'red');
context.fillStyle = lingrad;
context.fillRect(10,10,130,130);
}
</script>
</head>
<body onload="draw('canvas');">
<h1>绘制线性渐变</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>2.绘制径向渐变
径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。譬如绘制
太阳时，沿着太阳的半径方向向外扩散出去的光晕，就是一种径向渐变。
使用图形上下文对象的createLinearGradient方法绘制径向渐变，该方法的定义如下所示。context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)该方法使用六个参数，xStart为渐变开始圆的圆心横坐标，yStart为渐变开始圆的圆心纵坐标，radiusStart为开始圆的半径，xEnd为渐变结束圆的圆心横坐标, yEnd 为渐变结束圆纵的坐标，radiusEnd为结束圆的半径。
在这个方法中，分别指定了两个圆的大小与位置。从第一个圆的圆心处向外进行扩散渐变，一直扩散到第二个圆的外轮廓处。在设定颜色时，与线性渐变相同，使用的是addColorStop方法进行设定。同样是需要设定0到1之间的浮点数来作为渐变转折点的偏移量。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>绘制就径向渐变</title>
<script >
function draw(id) {
var context = document.getElementById('canvas').getContext('2d');
var radgrad = context.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
var radgrad2 = context.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
var radgrad3 = context.createRadialGradient(95,15,15,102,20,40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
var radgrad4 = context.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
context.fillStyle = radgrad4;
context.fillRect(0,0,150,150);
context.fillStyle = radgrad3;
context.fillRect(0,0,150,150);
context.fillStyle = radgrad2;
context.fillRect(0,0,150,150);
context.fillStyle = radgrad;
context.fillRect(0,0,150,150);
}
</script>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>
