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

    通过使用CSS,控制文本的字体,风格和颜色 1.基本操作: body{ font-family: Verdana, Geneva, Tahoma, sans-serif } body{ font-si ...

  2. 【转】DCX (数独-八皇后问题)

    还没学会,先转了再说.. 出处:http://grenet.cnblogs.com/ 跳跃的舞者,舞蹈链(Dancing Links)算法--求解精确覆盖问题   精确覆盖问题的定义:给定一个由0-1 ...

  3. CSS margin 属性

    设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...

  4. ANDROID_MARS学习笔记_S01原始版_021_MP3PLAYER001_下载mp3文件

    一.简介 1.在onListItemClick()中new Intent,Intent以存储序列化后的mp2Info对象作为参数,启动serivce 2.DownloadService在onStart ...

  5. 雷军的B面:那些赔到血本无归的失败投资案例

    文/李红双 雷军投资方向偏多元化布局,从电商到房地产,从互联网社区到移动互联网,多方跨界的结果必然是有失有得.本文扒一扒“雷军系”中最惨烈的电商投资,凡客诚品融资5.3亿美元目前处于垮台边缘,乐淘融资 ...

  6. JSON对象与JSON数组

    一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):""名称/ ...

  7. leetcode面试准备:Implement Trie (Prefix Tree)

    leetcode面试准备:Implement Trie (Prefix Tree) 1 题目 Implement a trie withinsert, search, and startsWith m ...

  8. poi大数据导入解决方法

    This one comes up quite a lot, but often the reason isn't what you might initially think. So, the fi ...

  9. cat ,more, Less区别

    使用cat more less都可以查看文本内容,但是它们三者有什么区别呢?more和less的功能完全重复吗?以下是我个人的总结,欢迎大家一起来分享 cat        连续显示.查看文件内容mo ...

  10. c#执行Dos命令

    一个执行Dos命令的窗口程序,与各位分享.   效果图:     具体实现在代码中有详细的注释,请看代码.   实现执行CMD命令的核心代码(Cmd.cs):   [csharp]   using S ...