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

  1. canvas arcTo()用法详解 – CodePlayer

    canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解

  2. HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...

  3. Canvas createRadialGradient API

    Canvas createRadialGradient API <!DOCTYPE html> <html lang="en"> <head> ...

  4. canvas基础用法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. canvas基本用法

    1.canvas和其他标签一样使用,但是IE8以下是不支持的,可以在canvas里面加一个span用来提示,例如: <canvas> <span>IE8不支持canvas< ...

  6. HTML5 canvas createRadialGradient()放射状/圆形渐变

    定义和用法 createLinearGradient() 方法创建放射状/圆形渐变对象. 渐变可用于填充矩形.圆形.线条.文本等等. 提示:请使用该对象作为 strokeStyle 或 fillSty ...

  7. canvas arcTo()用法详解

    CanvasRenderingContext2D对象的方法arcTo()的用法. arcTo(x1, y1, x2, y2, radius) arcTo()方法将利用当前端点.端点1(x1,y1)和端 ...

  8. canvas的用法

    包括: 介绍. 基础入门.(兼容性.获取canvas上下文.绘制直线/描边,填充内容.绘制表格.) canvas是基于状态的绘图. 绘制矩形. 绘制圆形. 绘制文本. 绘制图片. 阴影. 渐变. 绘制 ...

  9. html5 canvas基本用法

    通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅 <!doctype html> <html> <head> <m ...

随机推荐

  1. windows store app search contract

    代码如下: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  2. Java编程思想（2）之一切皆对象

  3. IOS 接ShareSDK问题

    如果报错AGCommon 等错误 引用libicucore.A.dylib ShareSDK 官网 管理中心 → 创建一个新的应用 获得key之后  啥都别做.! - (BOOL)applicatio ...

  4. asp.net将数据库中的数据赋给DropDownList

    当你选定一项进行其他操作时会重新绑定dropdownlist,这样会重新回到第一项,在page_load里加上判断if(!IsPostBack){'这里是你需要绑定dropdownlist的代码'}. ...

  5. 《ArcGIS Engine+C#实例开发教程》第四讲 状态栏信息的添加与实现

    原文:<ArcGIS Engine+C#实例开发教程>第四讲 状态栏信息的添加与实现 摘要:在上一讲中,我们完成了 MapControl 和PageLayoutControl两种视图的同步 ...

  6. 编写 Objective-C 代码

    如果您未曾开发过 iOS 或 Mac OS X 平台的程序,那就需要开始了解它们的首要程序设计语言 Objective-C.Objective-C 并不是一种很难的语言,如果能花一点时间学习,相信您会 ...

  7. Shell编程学习---第五篇：Shell的输入和输出

    在shell脚本中,可以用几种不同的方式读入数据:可以使用标准输入—缺省为键盘,或 者指定一个文件作为输入.对于输出也是一样:如果不指定某个文件作为输出,标准输出总 是和终端屏幕相关联.如果所使用命令 ...

  8. wzplayer2 for windows ActiveX 试用地址

    提供wzplayer2 for windows ActiveX,测试地址:http://www.coolradio.cn/IE.htm 大家使用时候必须允许未签名ActiveX下载和运行,否则将无法正 ...

  9. Android中使用proguardgui混淆jar包

    本文章的前提条件是,读者已经掌握了正确导出jar包的技能. 1.拷贝Android项目中"proguard.cfg"文件到你指定的位置,并改名为"proguard.pro ...

  10. Codevs_1403_新三国争霸_(Kruskal+动态规划)

    描述 http://codevs.cn/problem/1403/ 共t天,n个点,m条边,选择每条边要付出不同的代价,其中某些天某些边不能用,要保证每一天n个点都是连通的,如果换方案要付出额外的代价 ...