首页 > 代码库 > canvas createRadialGradient 用法

canvas createRadialGradient 用法

径向渐变,就是环形的渐变了,由圆心(或者是较小的同心圆)开始向外扩散渐变的效果,听着有些抽象,往下看图一下子就明白了。线性渐变指定了起点和终点,径向渐变则指定了开始的结束园的圆心和半径。这里使用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的圆心重合

技术分享

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上的点所连成区域,它们所组成的立体形状在某个角度的观察结果。所以当两个圆相离的时候,会形成放射状的扇形。可能还是有点难理解,把两个圆放到三维的场景下,就容易看懂了。

技术分享

 

 

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

canvas createRadialGradient 用法