话说上次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有会有什么结果呢?more

靠猜是没用的,对码农来说,代码才是王道。嗯,看看实验代码:
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上的点所连成区域,所以当两个圆相离的时候,会形成放射状的扇形。可能还是有点难理解,把两个圆放到三维的场景下,就容易看懂了。

如果你得到了其它结论,不妨交流下哈。

Comments
Write a Comment
  • xuhaibo reply

    不错,就我的理解,就是圆1在远处,圆2在近处,它们所组成的立体形状在某个角度的观察结果。

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟