html圆渐变颜色代码,HTML5 canvas createRadialGradient()放射状/圆形渐变(示例代码)

定义和用法

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

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

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

原理示意图

JavaScript 语法：

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

参数值

参数描述

x0

渐变的开始圆的 x 坐标

y0

渐变的开始圆的 y 坐标

r0

开始圆的半径

x1

渐变的结束圆的 x 坐标

y1

渐变的结束圆的 y 坐标

r1

结束圆的半径

实例：

varcanvas=document.getElementById(‘canvas1‘);varctx=canvas.getContext(‘2d‘);vargrd=ctx.createRadialGradient(100,100,5,100,100,100);

grd.addColorStop(0,‘red‘);

grd.addColorStop(1,‘white‘);//使用经向渐变

ctx.fillStyle=grd;

ctx.fillRect(0,0, canvas.width, canvas.height);

浏览器支持

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

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

原理示意说明：

varcanvas=document.getElementById(‘canvas1‘);varctx=canvas.getContext(‘2d‘);//当cycle1在cycle2里边时，并且圆心重合

varcycle1={

x:200,

y:200,

r:25};varcycle2={

x:200,

y:200,

r:80};

ctx.beginPath();

ctx.arc(cycle1.x, cycle1.y, cycle1.r,0, Math.PI* 2,false);

ctx.stroke();

ctx.beginPath();

ctx.arc(cycle2.x, cycle2.y, cycle2.r,0, Math.PI* 2,false);

ctx.stroke();//使用经向渐变

vargrd=ctx.createRadialGradient(cycle1.x, cycle1.y, cycle1.r, cycle2.x, cycle2.y, cycle2.r);

grd.addColorStop(0,‘rgba(255,0,0,0.75)‘);

grd.addColorStop(0.5,‘rgba(0,255,0,0.75)‘);

grd.addColorStop(1,‘rgba(0,0,255,0.75)‘);

ctx.fillStyle=grd;

ctx.fillRect(0,0,500,500);

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

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

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

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

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

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

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

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

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