繪制曲線有幾種思路：
1、通過quadraticCurveTo(controlX, controlY, endX, endY)方法來繪制二次曲線
2、通過bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY)方法，來繪制貝塞爾曲線
3、通過畫圓的方法arc(x, y, radius, startAngle, endAngle, antiClockwise)來取得某一段圓弧，作為要畫出的曲線
1、二次曲線quadraticCurveTo
quadraticCurveTo(cpx,cpy,x,y)
二次曲線也稱二次貝塞爾曲線或圓錐曲線或圓錐截線，是直圓錐面的兩腔被一平面所截而得的曲線。當截面不通過錐面的頂點時，曲線可能是圓、橢圓、雙曲線、拋物線。當截面通過錐面 的頂點時，曲線退縮成一點、一直線或二相交直線。在截面上的直角坐標系(x,y)之下,這些曲線的方程是x,y的二元二次方程
- 參數1：控制點x
- 參數2：控制到y
- 參數3：結束點x
- 參數4：結束點y
數學公式表示如下：
二次方貝茲曲線的路徑由給定點P0、P1、P2的函數B（t）追蹤：
代碼實例：
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>canvas直線</title>
<meta
name="Keywords" content="">
<meta name="author"
content="@my_programmer">
<style type="text/css">
body,
h1{margin:0;} canvas{margin: 20px;} </style> </head> <body onload="draw()"> <h1>二次貝塞爾曲線</h1> <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas> <script> function draw() { var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); //繪制起始點、控制點、終點 context.beginPath(); context.moveTo(20,170); context.lineTo(130,40); context.lineTo(180,150); context.stroke(); //繪制2次貝塞爾曲線 context.beginPath(); context.moveTo(20,170); context.quadraticCurveTo(130,40,180,150); context.strokeStyle = "red"; context.stroke(); } </script> </body> </html>
代碼效果：
2、貝塞爾曲線
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
- 參數1：控制點x1
- 參數2：控制點y1
- 參數3：控制點x2
- 參數4：控制點y2
- 參數5：結束點x
- 參數6：結束點y
貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程序的數學曲線。一般的矢量圖形軟件通過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。當然在一些比較成熟的位圖軟件中也有貝塞爾曲線工具，如PhotoShop等。在Flash4中還沒有完整的曲線工具，而在Flash5里面已經提供出貝塞爾曲線工具。
和二次曲線類似，它的函數是：bezierCurveTo()。貝塞爾曲線和二次曲線不同的是，它有2個控制點。二次曲線是有一個無形的控制點在拉動曲線，而貝塞爾曲線就是2個控制點在拉動曲線。
數學公式表示如下：
P0、P1、P2、P3四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於P0走向P1，並從P2的方向來到P3。一般不會經過P1或P2；這兩個點只是在那里提供方向資訊。P0和P1之間的間距，決定了曲線在轉而趨進P3之前，走向P2方向的“長度有多長”。
代碼實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas直線</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body, h1{margin:0;} canvas{margin: 20px; } </style> </head> <body onload="draw()"> <h1>三次貝塞爾曲線</h1> <canvas id="canvas" width=200 height=200 style="border: 1px solid #ccc;"></canvas> <script> function draw() { var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); //繪制起始點、控制點、終點 context.beginPath(); context.moveTo(25,175); context.lineTo(60,80); context.lineTo(150,30); context.lineTo(170,150); context.stroke(); //繪制3次貝塞爾曲線 context.beginPath(); context.moveTo(25,175); context.bezierCurveTo(60,80,150,30,170,150); context.strokeStyle = "red"; context.stroke(); } </script> </body> </html>
代碼效果圖：
3、圓弧線
arc(x, y, radius, startAngle, endAngle, antiClockwise)
- 參數1：圓心x
- 參數2：圓心y
- 參數3：半徑
- 參數4：開始弧度
- 參數5：結束弧度
- 參數6：是否為逆時針方向，默認false
所謂弧度就是一個圓周的一部分，可以用圓心（參數1、2）和圓的扇形半徑（參數3）來表示。為了表示弧度的范圍，必須定義弧度的起點（參數4）和終點（參數5），以及它的方向（參數6）。
示例一個簡單的弧度：
<!DOCTYPE HTML> <html> <head> <style> #myCanvas { border: 1px solid #9C9898; } </style> </head> <body> <canvas id="myCanvas" width="600" height="300"></canvas> <script> function PI(deg) { return deg/180*Math.PI; } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var pi=Math.PI; context.beginPath(); context.arc(200, 200, 100, PI(-90), PI(0), false); context.lineWidth = 10; context.strokeStyle = 'black'; context.stroke(); </script> </body> </html>