canvas径向渐变详解
1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆的坐标和半径。
2,设置渐变颜色 addColorStop(position,color),position为从0.0~1.0之间的值,表示渐变的相对位置;color是一个有效的css颜色值。
3,设置画笔颜色为该径向渐变对象。
4,画图。
var c = document.getElementById('mycanvas').getContext('2d');
var radial = c.createRadialGradient(100,100,20,120,120,50);
radial.addColorStop(0,'#EE84AA');
radial.addColorStop(0.9,'#FF0188'); // 颜色值 #FF0188 == rgba(255,1,136,1)
radial.addColorStop(1,'rgba(255,1,136,0)'); c.fillStyle = radial;
c.fillRect(0,0,500,500);
效果图如下,这个立体的球形。



var c = document.getElementById('mycanvas').getContext('2d'); var radial = c.createRadialGradient(100,100,20,120,120,50);
radial.addColorStop(0,'#EE84AA');
radial.addColorStop(0.9,'#FF0188');
radial.addColorStop(1,'rgba(255,1,136,0)'); c.fillStyle = radial;
c.fillRect(0,0,500,500); //以下是添加的辅助线
c.arc(100,100,20,0,2*Math.PI);
c.moveTo(170,120);
c.arc(120,120,50,0,2*Math.PI);
c.stroke();
效果图:

var radial = c.createRadialGradient(80,80,20,120,120,50);
radial.addColorStop(0,'#EE84AA');
radial.addColorStop(0.9,'#FF0188');
radial.addColorStop(1,'rgba(255,1,136,0)'); c.fillStyle = radial;
c.fillRect(0,0,500,500); //以下是添加的辅助线
c.arc(80,80,20,0,2*Math.PI);
c.moveTo(170,120);
c.arc(120,120,50,0,2*Math.PI);
c.stroke();
效果图:
var radial = c.createRadialGradient(100,100,20,130,130,50);
radial.addColorStop(0,'#EE84AA');
radial.addColorStop(0.9,'#FF0188');
radial.addColorStop(1,'rgba(255,1,136,0)'); c.fillStyle = radial;
c.fillRect(0,0,500,500); //以下是添加的辅助线
c.arc(100,100,20,0,2*Math.PI);
c.moveTo(180,130);
c.arc(130,130,50,0,2*Math.PI);
c.stroke();
效果图:
var radial = c.createRadialGradient(70,70,20,130,130,50);
radial.addColorStop(0,'#EE84AA');
radial.addColorStop(0.9,'#FF0188');
radial.addColorStop(1,'rgba(255,1,136,0)'); c.fillStyle = radial;
c.fillRect(0,0,500,500); //以下是添加的辅助线
c.arc(70,70,20,0,2*Math.PI);
c.moveTo(180,130);
c.arc(130,130,50,0,2*Math.PI);
c.stroke();
效果图,so cute~

解第一题过程中为了避免这个问题的干扰,设置了大大的着色区域c.fillRect(0,0,500,500);
var radial = c.createRadialGradient(100,100,20,120,120,50);
radial.addColorStop(0,'#EE84AA');
radial.addColorStop(0.9,'#FF0188');
radial.addColorStop(1,'rgba(255,1,136,0)'); c.fillStyle = radial;
c.arc(80,100,60,0,2*Math.PI);
c.fill(); //以下是添加的辅助线
c.moveTo(170,120);
c.arc(120,120,50,0,2*Math.PI);
c.stroke();
辅助线效果图:
上面较大的圆为绘制区域,下面小点的是径向渐变圆。着色区域是两个圆相交的部分。
相关参考地址:
canvas径向渐变详解的更多相关文章
- Canvas使用渐变之-径向渐变详解
创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1) 一共六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...
- css3径向渐变详解-遁地龙卷风
(-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image: ...
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- canvas arcTo()用法详解 – CodePlayer
canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解
- Android中Canvas绘图基础详解(附源码下载) (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- Canvas使用渐变之-线性渐变详解
在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1) 返回 CanvasGrad ...
- 第157天:canvas基础知识详解
目录 一.canvas简介 1.1 什么是canvas?(了解) 1.2 canvas主要应用的领域(了解) 二.canvas绘图基础 2.0 sublime配置canvas插件(推荐) 2.1 Ca ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- html5 canvas 径向渐变2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 冒泡排序和快速排序的java实现
转发请注明原创地址 http://www.cnblogs.com/dongxiao-yang/p/6264831.html 冒泡 public static int[] bubble_sort(int ...
- CALayer 的 position和anchorPoint属性
在iOS 中,UIButton.UIImage等UIView 之所以能够显示在屏幕上,是因为其内部有一个图层(CALayer).通过UIView的layer 属性可以访问这个图层: @property ...
- 从bug中学习怎么写代码
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:从bug中学习怎么写代码.
- C++ CheckListBox
实现过程 CCheckListBox listbox1; listbox1.AddString("葡萄"); listbox1.AddString(" ...
- 利用mongodb开发lbs应用实践【转】
近期作为突击队员,与同事一起突击构建了一个简单的lbs系统.当前比较主流的做法是使用mongodb,因为其已经封装了常用的lbs基本操作(如查找附近的人),功能非常强大,对于开发周期只有一周的项目,m ...
- android90 bind方式启动服务service调用service里的方法
package com.itheima.banzheng; import com.itheima.banzheng.LeaderService.ZhouMi; import android.os.Bu ...
- 进程控制之wait3和wait4函数
大多数UNIX系统实现提供了另外两个函数wait3和wait4.它们提供的功能比POSIX.1函数wait.waitpid和waitid所提供的功能要多一个,这与附加参数rusage有关.该参数要求内 ...
- 做一款仿映客的直播App?看我就够了
来源:JIAAIR 链接:http://www.jianshu.com/p/5b1341e97757 一.直播现状简介 1.技术实现层面: 技术相对都比较成熟,设备也都支持硬编码.IOS还提供现成 ...
- list add元素覆盖之前元素问题思考
最近码墙时发现了一个很有意思的问题,定义一个引用对象,如果在循环外面定义对象,在循环里list.add(对象),最后的结果却是所有的对象值都是一样的,即每add一次,都会把之前所有的数据覆盖掉,蛮有趣 ...
- android微信简单界面
这几天没事做了一个简单的菜单布局,在这里我没有添加任何的功能只是做了一个简单的布局.看着还可以,就想着与大家分享一下. 代码如下: <LinearLayout xmlns:android=&qu ...