HTML径向效果,HTML Canvas实现径向渐变效果

可以先使用HTML Canvas的径向渐变的函数createRadialGradient()来创建一个放射状/圆形渐变对象;然后使用addColorStop()方法定义渐变颜色;最后使用fillStyle属性填充渐变颜色,使用fillRect()等方法来绘制“已填色”的形状,如矩形,圆形,线条,文本等。

d558d9999aaa

实现径向渐变效果所要的方法有:

createLinearGradient()方法创建放射状/圆形渐变对象;渐变可用于填充矩形、圆形、线条、文本等等。

JavaScript 语法:context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数值:

● x0:定义渐变的开始圆的 x 坐标

● y0:定义渐变的开始圆的 y 坐标

● r0 :定义开始圆的半径

● x1:定义渐变的结束圆的 x 坐标

● y1:定义渐变的结束圆的 y 坐标

● r1:定义结束圆的半径

addColorStop()方法规定渐变对象中的颜色和位置。可以使用addColorStop()方法规定不同的颜色,以及在渐变对象中的何处定位颜色。

fillStyle属性设置或返回用于填充绘画的颜色、渐变或模式。

fillRect()方法绘制“已填色”的矩形。默认的填充颜色是黑色。

示例1:

var c = document.getElementById('myCanvas');

var ctx = c.getContext('2d');

//创建一个径向渐变对象

var radgrad = ctx.createRadialGradient(100,100,20,100,100,50);

//定义渐变色颜色

radgrad.addColorStop(0, 'red');

radgrad.addColorStop(0.3, 'yellow');

radgrad.addColorStop(1, 'blue');

ctx.fillStyle = radgrad;  //设置用于填充绘画的颜色、渐变或模式

ctx.fillRect(50,50,150,150);//绘制渐变图形

效果图:

d558d9999aaa

示例2:绘制具有径向渐变的球

线性渐变效果

var canvas= document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

function circle(x, y, r, c) {

ctx.beginPath();

var rad = ctx.createRadialGradient(x, y, 1, x, y, r);

rad.addColorStop(0, 'rgba('+c+',1)');

rad.addColorStop(1, 'rgba('+c+',0)');

ctx.fillStyle = rad;

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

ctx.fill();

}

circle(128, 128, 200, '255,0,0');

circle(64, 64, 30,'0,255,0');

效果图:

d558d9999aaa

示例3:使用渐变色绘制环

var canvas= document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var radgrad = ctx.createRadialGradient(60, 60, 0, 60, 60, 60);

radgrad.addColorStop(0.8, 'rgba(255,0,0,0)');

radgrad.addColorStop(0.85,'rgba(255,0,0,.6)');

radgrad.addColorStop(0.9, 'rgba(255,0,0,1)');

radgrad.addColorStop(0.95,'rgba(255,0,0,.6)');

radgrad.addColorStop(1,  'rgba(255,0,0,0)');

ctx.fillStyle = radgrad;

ctx.arc(60, 60, 60, 0, 2 * Math.PI, true);

ctx.fill();

效果图:

d558d9999aaa

更多前端开发知识,请查阅 HTML中文网 !!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值