0
0

Canvas中createRadialGradient的各种取值研究

iAzrael 发表于 2012年11月25日 22:39 | Hits: 1613
Tag: JS | Web那些事 | 快乐的码农 | canvas | 放射渐变

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

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

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

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

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

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

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

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/

0     0

评价列表(0)