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 ...
随机推荐
- chmod,chown和chgrp的区别
1.chgrp(转变文件所属用户组)change group chgrp 用户组 文件名 ###便是这个格了.若是整个目次下的都改,则加-R参数用于递归. 如:chgrp -R user smb.co ...
- Struts2的一个问题: 找不到struts.xml的路径问题
一. 最近在学习Struts2的一些知识,在使用Struts2搭建框架的时候,部署到服务器上的时候出现上面的问题: 三月 19, 2016 1:43:24 下午 org.apache.tomcat.u ...
- 388A Fox and Box Accumulation
一开始贪心策略想错了! #include<cstdio> #include<algorithm> using namespace std; ]; int main() { in ...
- linux awk命令详解(转)
http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858470.html 简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编 ...
- float 和 real
用于表示浮点数值数据的大致数值数据类型.浮点数据为近似值:因此,并非数据类型范围内的所有值都能精确地表示. 注意: real 的 SQL-92 同义词为 float(24). 数据类型 范围 存储 ...
- Android 带着用户名的SharedPreferences
/** * 设置当前用户的签到信息 * account&info;account&info * * @param context * @param sign * @author jrj ...
- C 语言函数指针
c代码: #include <stdio.h> int add(int x,int y); int subtract(int x,int y); int domath(int (*math ...
- Android-加载透明PNG图片变黑的问题
png和jpg作为两种最常用的图片格式,首先我们要知道他们的区别: 1.从一般图片的外观上来说,他们是无法直接判断的 2.从文件大小上来说,同样一张图png肯定比jpg的大 3.通过查资料咱们可以发现 ...
- Layout Resource官方教程(2)用ViewStub引用的嵌入的layout可推迟加载
Loading Views On Demand THIS LESSON TEACHES YOU TO Define a ViewStub Load the ViewStub Layout YOU SH ...
- Maprduce重写参考
Maprduce数据流走向图: 流程解释 Input files 功能描述:存储在HDFS中的文件数据 InputFormat 功能描述:1 ...