最近項(xiàng)目中的設(shè)計(jì)圖上有一條曲線設(shè)計(jì)風(fēng)格，就想著能不用切圖的方法實(shí)現(xiàn)嗎？（畢竟切圖好討厭的(≧▽≦)/）泪电。就研究了一下實(shí)現(xiàn)方式般妙。在此纪铺，給大家做一下參考。
Border的實(shí)現(xiàn)方式
大家都知道碟渺，CSS3中border已經(jīng)可以實(shí)現(xiàn)一定的弧度鲜锚。因此，就想著可以利用border的特性畫一條曲線苫拍。
1.首先我們先建一個(gè)div元素
<div class="container">
<div class="curve"></div>
</div>
2.給它一些基本樣式
.container {
width: 500px;
height: 200px;
border: 1px solid black;
text-align: center;
box-shadow: 5px 5px 3px rgba(125, 125, 126, 0.7);
position: relative;
}
.curve {
position: absolute;
width: 250px;
height: 30px;
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 100%;
bottom: 0;
}
.curve:after {
content: "";
position: absolute;
width: 250px;
height: 30px;
border-top: 1px solid red;
border-left: 1px solid red;
border-top-left-radius: 100%;
left: 250px;
bottom: 30px;
}
最終效果：
從效果上看芜繁，這個(gè)方法實(shí)現(xiàn)的曲線過(guò)渡處不夠平滑，仍存在較大缺陷绒极。下面就介紹兩個(gè)更加常用的方法骏令。
SVG方式
在搜索實(shí)現(xiàn)方案的過(guò)程中，發(fā)現(xiàn)一個(gè)好用的工具,可以用它來(lái)調(diào)試出復(fù)雜的曲線垄提。根據(jù)設(shè)計(jì)稿的線條榔袋，很快就調(diào)試出來(lái)一個(gè)svg的路徑參數(shù)。
<path d="M20,283 C208,288 282,195 472,201" />
接著铡俐，修飾一下該曲線凰兑，就能得到我們所需要的效果了。
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
<path d="M20,283 C208,288 282,195 472,201" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"/>
</g>
</svg>
最終效果如圖：
在線嘗試codepen
Canvas的實(shí)現(xiàn)方式
發(fā)現(xiàn)Canvas真的是個(gè)好東西审丘，可以用前端實(shí)現(xiàn)很多特效吏够。當(dāng)然畫個(gè)曲線對(duì)于它來(lái)說(shuō)，簡(jiǎn)直小菜一碟。
這里會(huì)用到貝塞爾曲線（bezierCurve)的一些知識(shí)锅知。該曲線會(huì)利用到四個(gè)點(diǎn)作為定位點(diǎn)播急，分別為頭和尾點(diǎn)還有兩個(gè)控制點(diǎn)用來(lái)控制整個(gè)曲線的形狀和曲率。具體可以參考維基百科上的相關(guān)介紹售睹。
1.創(chuàng)建一個(gè)canvas元素
<canvas id="myCanvas"></canvas>
2.利用bezierCurveTo這個(gè)方法來(lái)畫該曲線旅择。由于這個(gè)方法相關(guān)參數(shù)難以確定，我同樣選擇了一個(gè)工具來(lái)獲取所需要的具體參數(shù)數(shù)值侣姆。
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = '500';
canvas.height = '400';
context.beginPath();
context.fillStyle = '#00000';
context.moveTo(64,288);
context.bezierCurveTo(208,286,257,201,420,200);
context.stroke();
//以下兩行是畫邊框
context.fillStyle = "#ff0000";
context.strokeRect(0, 0, canvas.width, canvas.height);
至此生真，我們就得到了我們想要的曲線了。
參考資料
How to Draw Quadratic Curves on an HTML5 Canvas
在線SVG編輯器
MDN SVG Tutorial
