SVG與canvas繪製彎線都要用到貝塞爾曲線，它分兩種形式（二次方與三次方）
我們先看canvas的。
quadraticCurveTo(cp1x, cp1y, x, y) //二次方bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)//三次方 |
它們都有一個起點一個終點（圖中的藍點），但二次方貝塞爾曲線只有一個（紅色）控制點點）而三次方貝塞爾曲線有兩個。參數 x 和 y 是終點座標，cp1x 和 cp1y 是第一個控制點的座標，cp2x 和 cp2y 是第二個的。
在SVG中有一個好用的屬性，叫path。我們可以向傳入一些特殊的字符串來實現複雜的圖形。我們看它關於貝塞爾曲線的相關實現。
| 命令 | 函數名字 | 參數 | 說明 |
|---|---|---|---|
| S(絕對定位) s(相對定位) |
shorthand/smooth curveto | (x2 y2 x y)+ | 二次方貝塞爾曲線 |
| C(絕對定位) c(相對定位) |
curveto | (x1 y1 x2 y2 x y)+ | 三次方貝塞爾曲線 |