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);

  效果图如下,这个立体的球形。

 

667722-20151211162003418-1788097768.png
 
这个简单的步骤中需要设置至少3个位置坐标和半径,各种坐标和半径组合会出现奇怪的形状,什么时候会出现奇怪的形状,怎么设置会出现我们想要的圆形呢?看下面试验。
 
求解1:创建对象时,两个圆的关系。
 
在以上基础上,如果把创建对象代码改为:
 radial = c.createRadialGradient(80,80,20,120,120,50);  //左边效果图
 radial = c.createRadialGradient(100,100,20,130,130,50);  // 右边效果图
效果图,和圆形差的太远了,倒是可以做箭头效果。。。
   667722-20151211162034168-610950285.png
这个形状怎么来的? 这时让我想起一张twitter logo的图片,大概是这样。所以,辅助线走起来~
 
667722-20151211162125293-1506001700.png
 
代码恢复至正常球形效果,并添加辅助线后,代码如下:
  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();

 效果图: 

667722-20151211162247121-834756869.png
从效果图可以看到起始圆完全在结束圆的包裹内。
改变起始圆和其对应辅助线的位置,代码如下:
 
 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();

 效果图:

 667722-20151211162409918-1877134832.png

在正常圆球基础上,改变结束圆和其对应辅助线位置
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();

 效果图:

 667722-20151211162643074-1413996673.png

现在再来看那些形状就没有那么奇怪了吧。
为了使效果更加明显,在举个栗子:
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~

 667722-20151211162742371-88487203.png

还有起始圆半径大于结束圆半径的情况,不再一一举例。
根据上面效果可知,如果起始圆不在结束圆内,被渲染部分为两个圆外切线和结束圆围成的锥形。
若要成为圆形,需保证起始圆在结束圆内部。
 
另外,根据html规范知:
1, r0或r1为负数,会报错。
2,若x0=x1, y0=y1, r0=r1,会跳过改步骤,不进行绘制。
 
求解二:渐变关系与绘制的图形的关系
 
以上的问题被避免了,但是绘图出现了这些形状:
667722-20151211163012918-939565174.png
前两个问题比较明显,是被截断的。如果告诉你第三个也是被截断的,你会不会相信~
第三个的确是被截断的,被圆形截断的!
为什么会被截断,就要说一下绘制图形是的注意事项了~

解第一题过程中为了避免这个问题的干扰,设置了大大的着色区域c.fillRect(0,0,500,500); 

在正常圆球的基础上,使绘制区域减小c.fillRect(0,0,500,150),便出现第一种情况。
使宽度和高度均小于圆球区域c.fillRect(0,0,300,150),便出现第二种情况。
若绘制形状为圆形,当圆球在绘制范围内,则显示为正常球形,类似于题一中正常情况。
若圆球只有部分只绘制范围内,便会出现上图3的情况,如下代码:
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();

 辅助线效果图:

667722-20151211163202183-1142163288.png

上面较大的圆为绘制区域,下面小点的是径向渐变圆。着色区域是两个圆相交的部分。

 

综上述,使用canvasGradient画一个正常的圆球效果,应遵循以下几点:
1. createRadialGradient()方法中,起始圆半径小于结束圆半径。
2.起始圆完全在终止圆的范围内
3.终止圆在绘制区域内

 

相关参考地址:

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 HTML5 中,可以使用 Canvas API 绘制径向渐变Canvas API 提供了 createRadialGradient() 方法来创建径向渐变对象。 createRadialGradient() 方法的语法如下: ``` context.createRadialGradient(x0, y0, r0, x1, y1, r1); ``` 其中,(x0, y0) 表示渐变的起始点,r0 表示起始点的半径,(x1, y1) 表示渐变的结束点,r1 表示结束点的半径。 接下来,可以使用 addColorStop() 方法来为渐变对象添加颜色。addColorStop() 方法的语法如下: ``` gradient.addColorStop(stop, color); ``` 其中,stop 参数表示颜色的位置,范围在 0.0(起始位置)和 1.0(结束位置)之间,color 参数表示颜色值。 下面是一个绘制径向渐变的例子: ```html <canvas id="myCanvas" width="200" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 创建径向渐变对象 var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100); // 添加颜色 gradient.addColorStop(0, "red"); gradient.addColorStop(1, "white"); // 绘制圆形 ctx.beginPath(); ctx.arc(100, 100, 100, 0, 2 * Math.PI); ctx.fillStyle = gradient; ctx.fill(); </script> ``` 这个例子中,先创建了一个半径为 50 到 100 的径向渐变对象,起始点和结束点都在圆心位置。然后,使用 addColorStop() 方法为渐变对象添加了两个颜色。最后,使用 fillStyle 属性将渐变对象设置为圆形的填充样式,绘制了一个填充有径向渐变的圆形。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值