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

設計參考圖.png

Border的實現方式

大家都知道，CSS3中border已經可以實現一定的弧度。因此，就想著可以利用border的特性畫一條曲線。

1.首先我們先建一個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

從效果上看，這個方法實現的曲線過渡處不夠平滑，仍存在較大缺陷。下面就介紹兩個更加常用的方法。

SVG方式

在搜索實現方案的過程中，發現一個好用的工具,可以用它來調試出復雜的曲線。根據設計稿的線條，很快就調試出來一個svg的路徑參數。

<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的實現方式

發現Canvas真的是個好東西，可以用前端實現很多特效。當然畫個曲線對于它來說，簡直小菜一碟。
這里會用到貝塞爾曲線（bezierCurve)的一些知識。該曲線會利用到四個點作為定位點，分別為頭和尾點還有兩個控制點用來控制整個曲線的形狀和曲率。具體可以參考維基百科上的相關介紹。

1.創建一個canvas元素

  <canvas id="myCanvas"></canvas>

2.利用bezierCurveTo這個方法來畫該曲線。由于這個方法相關參數難以確定，我同樣選擇了一個工具來獲取所需要的具體參數數值。

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