如何在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到了這個新技能呢？