如何在html页面上画一条渐变线

1.前言

有时候,你需要画一条这种渐变线:

示例图片

你抓耳挠腮,冥思苦想,最后发现好像还是没有什么明确的思路。

这里写图片描述

别慌,接下来我将手把手教你几种方法,在页面上画渐变线。

2.正文

2.1div实现

用div配合css3可以完美的实现这种渐变效果:

这里写图片描述

而实现这种效果的代码也很简洁:

height: 2px;
width: 300px;
background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0),#5DDDD3,rgba(255,255,255,0));
background: linear-gradient(to right, rgba(255, 255, 255, 0),#5DDDD3,rgba(255,255,255,0));

用div来实现这个效果,是最简单的一种方式。

2.2canvas配合椭圆实现

还有一种实现这种效果的方式是canvas配合椭圆的方式来实现。

如果还不了解canvas的童鞋,请先去了解一下:canvas api 文档

canvas可以直接在画布上绘制椭圆形:

这里写图片描述

代码为这样:

g.scale(20, 1);  //压缩圆形
g.beginPath();
g.arc(10, 100, 3, 0, 2 * Math.PI);  //画圆
g.closePath();

g.shadowBlur = 3;  //设置模糊
g.shadowColor = "#5DDDD3";

var grd = g.createLinearGradient(0, 0, 20, 0);  //设置渐变
grd.addColorStop(0, "#fff");
grd.addColorStop(0.5, "#5DDDD3");
grd.addColorStop(1, "#fff");
g.fillStyle = grd;
g.fill(); //填充路径

2.3 Canvas配合线条直接实现

既然我们在上面,直接用 div 配合 css3 的渐变属性,能够画一条渐变线,那么这里我们直接在 canvas 上画一条直线,然后配合渐变,是不是也能实现呢?

尝试了一下,果然能够实现,下面为代码:

g.moveTo(50, 8);
g.lineTo(-50, 8);
g.lineWidth = 1;

var grd = g.createLinearGradient(-50, 0, 50, 0);
grd.addColorStop(0, "white");
grd.addColorStop(0.5, "#5DDDD3");
grd.addColorStop(1, "white");

g.strokeStyle = grd;
g.stroke();

下面为效果:

这里写图片描述

3.总结

是不是很炫酷呢,小伙伴们是不是get到了这个新技能呢?

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值