Canvas径向渐变createRadialGradient的各种取值研究

来源：互联网发布：淘宝手机端怎么改评价编辑：程序博客网时间：2024/05/18 00:32

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

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

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

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

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

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

JavaScript1
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');
varcycle1={
    x:150,
    y:150,
    r:25
}
varcycle2={
    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();
 
vargr=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/

0 0