定义和用法
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相交时,圆心相同,并且大小相同