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 οnlοad="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 οnlοad="draw('canvas');"> <canvas id="canvas" width="400" height="300" /> </body> </html>
