最近項(xiàng)目中的設(shè)計(jì)圖上有一條曲線設(shè)計(jì)風(fēng)格，就想著能不用切圖的方法實(shí)現(xiàn)嗎？（畢竟切圖好討厭的_(≧▽≦)/）。就研究了一下實(shí)現(xiàn)方式。在此，給大家做一下參考。

設(shè)計(jì)參考圖.png

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;
}

最終效果：

border-curve.png

從效果上看，這個(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>

最終效果如圖：

svg-curve-demo.png

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);

至此，我們就得到了我們想要的曲線了。

canvas-curve-demo.png

參考資料

How to Draw Quadratic Curves on an HTML5 Canvas
在線SVG編輯器
MDN SVG Tutorial