canvas 放射线渐变/圆形渐变详解

定义和用法

createLinearGradient() 方法创建放射状/圆形渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

原理示意图

JavaScript 语法：

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数值

参数	描述
x0	渐变的开始圆的 x 坐标
y0	渐变的开始圆的 y 坐标
r0	开始圆的半径
x1	渐变的结束圆的 x 坐标
y1	渐变的结束圆的 y 坐标
r1	结束圆的半径

实例：

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createRadialGradient() 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 元素。

 

 原理示意说明：

一、两个圆大小不相等情况下

1.当cycle1在cycle2里边时，并且圆心重合

2.当cycle1在cycle2里边时，圆心不重合

3.当cycle2在cycle1里边时，圆心不重合时

4.当cycle1和cycle2相离时，并且大小不相同

二、两个圆大小相等情况下

1.当cycle1和cycle2相离时，并且大小相同

2.当cycle1和cycle2相交时，并且大小相同

3.当cycle1和cycle2相交时，圆心相同，并且大小相同