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

转自：http://imatlas.com/posts/canvas-createradialgradient/