话说上次melody同学分享了canvas绘图的相关内容，大家都对createRadialGradient的输入参数和结果蛮感兴趣的。因此我也把它的各种取值都试了一遍，发现了一些有趣的东西，共享之。

首先说下createRadialGradient，createRadialGradient是canvas创建发射渐变的一个方法，它的形参是这样子的：
createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
前三个参数是起始圆（cycle1）的x、y、半径，后三个是终点圆（cycle2）的x、y、半径。其它介绍就不多说了，可以看看w3school的介绍。

参数
描述

xStart, yStart
开始圆的圆心的坐标。

radiusStart
开始圆的半径。

xEnd, yEnd
结束圆的圆心的坐标。

radiusEnd
结束圆的半径。

于是我们在想，cycle1 > cycle2会怎么样了？cycle1==cycle2有会有什么结果呢？more

靠猜是没用的，对码农来说，代码才是王道。嗯，看看实验代码：
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
var cycle1 = {
x: 150,
y: 150,
r: 25
}
var cycle2 = {
x: 250,
y: 250,
r: 50
}
ctx.beginPath();
ctx.arc(cycle1.x, cycle1.y, cycle1.r, 0, Math.PI*2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(cycle2.x, cycle2.y, cycle2.r, 0, Math.PI*2, false);
ctx.stroke();

var gr = ctx.createRadialGradient(cycle1.x, cycle1.y, cycle1.r, cycle2.x, cycle2.y, cycle2.r);
gr.addColorStop(0, 'rgba(255, 0, 0, 0.75)');
gr.addColorStop(0.5, 'rgba(0, 255, 0, 0.75)');
gr.addColorStop(1, 'rgba(0, 0, 255, 0.75)');

ctx.fillStyle = gr;
ctx.fillRect(0, 0, 500, 500);
诶，这是个苦力活，每次给cycle1和cycle2取不同的值，把结果截图并对比。

所得结果如下，为了比较好的区别，给两个圆的位置的画了边框，并用1标识cycle1，2标识cycle2。

1. cycle1 < cycle2 + cycle1在cycle2里面+ cycle1跟cycle2的圆心重合

2. cycle1 < cycle2 + cycle1在cycle2里面+cycle1跟cycle2的圆心不重合

3. cycle1 > cycle2 + cycle2在cycle1里面+cycle1跟cycle2的圆心不重合

4. cycle1 < cycle2 + cycle1跟cycle2相离

5. cycle1 > cycle2 + cycle1跟cycle2相离

6. cycle1 == cycle2 + cycle1跟cycle2相离

7. cycle1 == cycle2 + cycle1跟cycle2相交

结论

其它情况就不一一列举了，这里已经足够说明问题了。其中两个圆相离的情况得到的渐变图案很神奇。嗯，然后得到了个不算结论的结论——createRadialGradient实现的线性渐变的原理是：发生渐变的区域是，cycle1上的点到cycle2上的点所连成区域，所以当两个圆相离的时候，会形成放射状的扇形。可能还是有点难理解，把两个圆放到三维的场景下，就容易看懂了。

如果你得到了其它结论，不妨交流下哈。