Canvas中createRadialGradient的各种取值研究

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

首先说下createRadialGradient，createRadialGradient是canvas创建发射渐变的一个方法，它的形参是这样子的：

JavaScript

1	createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

前三个参数是起始圆（cycle1）的x、y、半径，后三个是终点圆（cycle2）的x、y、半径。其它介绍就不多说了，可以看看w3school的介绍。

参数	描述
xStart, yStart	开始圆的圆心的坐标。
radiusStart	开始圆的半径。
xEnd, yEnd	结束圆的圆心的坐标。
radiusEnd	结束圆的半径。

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

靠猜是没用的，对码农来说，代码才是王道。嗯，看看实验代码：

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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上的点所连成区域，所以当两个圆相离的时候，会形成放射状的扇形。可能还是有点难理解，把两个圆放到三维的场景下，就容易看懂了。

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