本文连接：http://blog.csdn.net/tomorrow13210073213/article/details/42486639
转载请注明出处
在前一篇博文中我们介绍过HTML5的canvas为我们提供了绘制线性渐变的相关方法，本篇中我们会介绍HTML5的另一种渐变，放射渐变。创建放射渐变的方法是createRadialGradient()。与线性渐变相同，用createRadialGradient()方法可以创建基于画布的线性渐变，创建好的线性渐变可以用于填充路径、定义笔触等。
方法：createRadialGradient()
方法名：createRadialGradient()
方法描述：用于创建基于整个画布的放射渐变，该渐变可以用于填充路径或定义笔触（作为属性fillStyle或strokeStyle的值）
js语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数：x0：渐变的开始圆的 x 坐标，
参数：y0：渐变的开始圆的 y 坐标，
参数：r0：开始圆的半径，
参数：x1：渐变的结束圆的 x 坐标，
参数：y1：渐变的结束圆的 y 坐标，
参数：r1：结束圆的半径
浏览器兼容：IE 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient() 方法。
使用注意：（1）获得渐变对象后，我们要使用 addColorStop() 方法规定不同的颜色，以及在渐变对象中的何处定位颜色。关于该方法，另有博文详述。
（2）我们用createRadialGradient()方法定义的渐变是基于整个canvas的，仅仅通过定义该渐变是看不到的，将该渐变定义为属性fillStyle或strokeStyle的值后，我们实际是将路径定义的矩形（面或笔触）、圆形（面或笔触）部分的渐变显示出来。
createRadialGradient()方法的定义及应用与createLinearGradient()基本相同，仅仅由于两者定义的渐变类型不同，其参数有所不同。
下面是我们的测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5 Canvas createLinearGradient</title>
<style type="text/css">
body {
margin: 0px;
width: 440px;
}
canvas {
float: left;
margin-left: 10px;
margin-top: 10px;
}
.radius {
border-radius: 50px;
}
</style>
</head>
<body>
<!--
createRadialGradient() 方法创建放射状/圆形渐变对象。
与createLinearGradient()相同，渐变可用于填充矩形、圆形、线条、文本等等。
该对象一般作为 strokeStyle 或 fillStyle 属性的值。
用方法 addColorStop() 规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数：x0：渐变的开始圆的 x 坐标，
参数：y0：渐变的开始圆的 y 坐标，
参数：r0：开始圆的半径，
参数：x1：渐变的结束圆的 x 坐标，
参数：y1：渐变的结束圆的 y 坐标，
参数：r1：结束圆的半径
-->
<canvas id="can" width="100" height="100"></canvas>
<canvas id="can2" width="100" height="100" class="radius"></canvas>
<canvas id="can3" width="100" height="100"></canvas>
</body>
<script type="text/javascript">
//左上角到右下角的渐变
var c = document.getElementById('can');
var cC = c.getContext('2d');
//参数：(渐变的开始圆的 x 坐标，渐变的开始圆的 y 坐标，开始圆的半径，渐变的结束圆的 x 坐标，渐变的结束圆的 y 坐标，结束圆的半径)
var rg = cC.createRadialGradient(50, 50, 10, 50, 50, 50);
rg.addColorStop(0, 'red');
rg.addColorStop(1, 'yellow');
cC.fillStyle = rg;
cC.fillRect(0, 0, 100, 100);
var c2 = document.getElementById('can2');
var cC2 = c2.getContext('2d');
var rg2 = cC2.createRadialGradient(50, 50, 10, 50, 50, 50);
rg2.addColorStop(0, 'red');
rg2.addColorStop(1, 'yellow');
cC2.fillStyle = rg2;
cC2.fillRect(0, 0, 100, 100);
var c3 = document.getElementById('can3');
var cC3 = c3.getContext('2d');
var rg3 = cC3.createRadialGradient(0, 0, 80, 0, 0, 100);
rg3.addColorStop(0, 'yellow');
rg3.addColorStop(1, 'red');
cC3.fillStyle = rg3;
cC3.fillRect(0, 0, 100, 100);
</script>
</html>
HTML5简明教程-1.1.4.HTML5Canvas参考手册 之 放射渐变 createRadialGradient
原文地址：http://blog.csdn.net/tomorrow13210073213/article/details/42486639
