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 ...
随机推荐
- 增加字体和颜色样式-------CSS
通过使用CSS,控制文本的字体,风格和颜色 1.基本操作: body{ font-family: Verdana, Geneva, Tahoma, sans-serif } body{ font-si ...
- 【转】DCX (数独-八皇后问题)
还没学会,先转了再说.. 出处:http://grenet.cnblogs.com/ 跳跃的舞者,舞蹈链(Dancing Links)算法--求解精确覆盖问题 精确覆盖问题的定义:给定一个由0-1 ...
- CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...
- ANDROID_MARS学习笔记_S01原始版_021_MP3PLAYER001_下载mp3文件
一.简介 1.在onListItemClick()中new Intent,Intent以存储序列化后的mp2Info对象作为参数,启动serivce 2.DownloadService在onStart ...
- 雷军的B面:那些赔到血本无归的失败投资案例
文/李红双 雷军投资方向偏多元化布局,从电商到房地产,从互联网社区到移动互联网,多方跨界的结果必然是有失有得.本文扒一扒“雷军系”中最惨烈的电商投资,凡客诚品融资5.3亿美元目前处于垮台边缘,乐淘融资 ...
- JSON对象与JSON数组
一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):""名称/ ...
- leetcode面试准备:Implement Trie (Prefix Tree)
leetcode面试准备:Implement Trie (Prefix Tree) 1 题目 Implement a trie withinsert, search, and startsWith m ...
- poi大数据导入解决方法
This one comes up quite a lot, but often the reason isn't what you might initially think. So, the fi ...
- cat ,more, Less区别
使用cat more less都可以查看文本内容,但是它们三者有什么区别呢?more和less的功能完全重复吗?以下是我个人的总结,欢迎大家一起来分享 cat 连续显示.查看文件内容mo ...
- c#执行Dos命令
一个执行Dos命令的窗口程序,与各位分享. 效果图: 具体实现在代码中有详细的注释,请看代码. 实现执行CMD命令的核心代码(Cmd.cs): [csharp] using S ...