canvas createRadialGradient 用法
径向渐变,就是环形的渐变了,由圆心(或者是较小的同心圆)开始向外扩散渐变的效果,听着有些抽象,往下看图一下子就明白了。线性渐变指定了起点和终点,径向渐变则指定了开始的结束园的圆心和半径。这里使用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 用法的更多相关文章
- canvas arcTo()用法详解 – CodePlayer
canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解
- HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...
- Canvas createRadialGradient API
Canvas createRadialGradient API <!DOCTYPE html> <html lang="en"> <head> ...
- canvas基础用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas基本用法
1.canvas和其他标签一样使用,但是IE8以下是不支持的,可以在canvas里面加一个span用来提示,例如: <canvas> <span>IE8不支持canvas< ...
- HTML5 canvas createRadialGradient()放射状/圆形渐变
定义和用法 createLinearGradient() 方法创建放射状/圆形渐变对象. 渐变可用于填充矩形.圆形.线条.文本等等. 提示:请使用该对象作为 strokeStyle 或 fillSty ...
- canvas arcTo()用法详解
CanvasRenderingContext2D对象的方法arcTo()的用法. arcTo(x1, y1, x2, y2, radius) arcTo()方法将利用当前端点.端点1(x1,y1)和端 ...
- canvas的用法
包括: 介绍. 基础入门.(兼容性.获取canvas上下文.绘制直线/描边,填充内容.绘制表格.) canvas是基于状态的绘图. 绘制矩形. 绘制圆形. 绘制文本. 绘制图片. 阴影. 渐变. 绘制 ...
- html5 canvas基本用法
通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅 <!doctype html> <html> <head> <m ...
随机推荐
- JSP页面之${fn:}内置函数
函数列表: 函数名 函数说明 使用举例 fn:contains 判断字符串是否包含另外一个字符串 <c:if test="${fn:contains(name, searchStrin ...
- 使用struts2标签<s:action无法显示引用页面问题
使用过程中参考:http://www.cnblogs.com/lihuiyy/archive/2012/03/23/2411601.html 个人使用: 1.引用页面 <s:action nam ...
- python机器学习库
http://scikit-learn.org/stable/install.html
- hdu 4814 Golden Radio Base
详解见:http://blog.csdn.net/tri_integral/article/details/18666797 #include<cstdio> #include<cs ...
- IBInspectable的使用
IBInspectable的使用 创建一个分类 定义属性 把此分类的头文件引入到pch里面 此时查看属性面板 就有了可以供我们勾选的选项 在.m中实现一下set和get方法
- easyui源码翻译1.32--Layout(布局)
前言 使用$.fn.layout.defaults重写默认值对象.下载该插件翻译源码 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖 ...
- Linux下使用clock_gettime给程序计时
http://www.cnblogs.com/daqiwancheng/archive/2010/07/01/1769522.html
- 手势识别官方教程(3)识别移动手势(识别速度用VelocityTracker)
moving手势在onTouchEvent()或onTouch()中就可识别,编程时主要是识别积云的速度用VelocityTracker等, Tracking Movement This lesson ...
- -_-#【JS 优化】把 JS 放到底部
一开始为以为Javascript脚本尽量放到页面底部加载,是指所有的JS脚本都要放到底部,后来才发现, 并不完全是这样,这里所指的脚本是指那些在加载过程中要执行的脚本,所以一般的处理办法还是页面头部引 ...
- apache开源项目--Lens
Lens 提供了一个统一数据分析接口.通过提供一个跨多个数据存储的单一视图来实现数据分析任务切分,同时优化了执行的环境.无缝的集成 Hadoop 实现类似传统数据仓库的功能. 该项目主要特性: 简单元 ...