径向渐变,就是环形的渐变了,由圆心(或者是较小的同心圆)开始向外扩散渐变的效果,听着有些抽象,往下看图一下子就明白了。线性渐变指定了起点和终点,径向渐变则指定了开始的结束园的圆心和半径。这里使用createRadialGradient来获得Canvas的CanvasGradient对象,所以addColorStop方法也是通用的。

W3C是这样定义的

context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数描述
x0渐变的开始圆的 x 坐标
y0渐变的开始圆的 y 坐标
r0开始圆的半径
x1渐变的结束圆的 x 坐标
y1渐变的结束圆的 y 坐标
r1结束圆的半径

如果两个圆位置不同会怎么样呢?

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

canvas createRadialGradient 用法-LMLPHP

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

canvas createRadialGradient 用法-LMLPHP

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

canvas createRadialGradient 用法-LMLPHP

4. cycle1 < cycle2 + cycle1跟cycle2相离

canvas createRadialGradient 用法-LMLPHP

5. cycle1 > cycle2 + cycle1跟cycle2相离

canvas createRadialGradient 用法-LMLPHP

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

canvas createRadialGradient 用法-LMLPHP

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

canvas createRadialGradient 用法-LMLPHP

结论

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

canvas createRadialGradient 用法-LMLPHP

以上是摘录别人的劳动成果 记录下来是便于学习 所以有雷同 都是我抄你

04-30 01:22