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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lovefengruoqing/article/details/80778046

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到了这个新技能呢？