三、曲線 Curve
3.1圓弧 Arc
通過調用上下文對象的arc()方法可以在HTML5畫布上繪製圓弧。圓弧由中心點、半徑、起始角、結束角和繪圖方向（順時針或逆時針）定義。同時可以用lineWidth、strokeStyle和lineCap屬性定義弧線的樣式。
圓弧是一個假想圓周長的一部分。這個假想圓可以用x、y和半徑radius來定義。
接下來，我們可以通過設置假想圓的圓周上的起始角startAngle和轉過角endAngle來定義圓弧的兩個端點。這兩個角度是以弧度定義的，形成以圓心爲頂點，與弧的兩端相交的夾角。
arc()方法的最後一個參數是antiClockwise，它定義了兩個端點之間的圓弧路徑的方向。除非另有聲明，否則此參數將默認爲false，表示按順時針方向繪製圓弧。
注意：另外，還可以使用arcTo()方法創建一個弧，該方法用於在路徑中創建圓角。該方法見後文說明。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="250"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
以上代碼演示了在畫布上繪製一段圓弧。
3.2二次曲線 Quadratic Curve
可以通過調用quadraticCurveTo()方法，在HTML5畫布上繪製二次曲線。二次曲線是由上下文點、控制點和結束點定義的。二次曲線可以用lineWidth、strokeStyle和lineCap屬性定義曲線的樣式。
控制點通過創建連接上下文點和終點的兩條虛切線來定義二次曲線的曲率。上下文點由moveTo()方法定義。將控制點移離上下文點和終點將創建更彎曲的曲線，將控制點移近上下文點和終點將創建更平直的曲線。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
// set context point
context.moveTo(188, 150);
// set control point and end point to draw quadratic curve
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
// line color
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
以上代碼演示了在畫布上繪製二次曲線。
3.3貝塞爾曲線 Bezier curve
要用HTML5畫布繪製貝塞爾曲線，可以使用bezierCurveTo()方法。貝塞爾曲線用上下文點、兩個控制點和一個結束點來定義。與二次曲線不同，貝塞爾曲線是由兩個控制點而不是一個控制點定義的，這樣我們就可以創建更復雜的曲率。貝塞爾曲線可以用lineWidth、strokeStyle和lineCap屬性定義曲線的樣式。
貝塞爾曲線是由當前上下文點、兩個控制點和結束點定義的。曲線的第一部分與由上下文點和第一控制點定義的假想線相切。曲線的第二部分與由第二控制點和結束點定義的假想線相切。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
// set context point
context.moveTo(188, 130);
// set control point and end point to draw bezier curve
context.bezierCurveTo(140, 10, 388, 10, 388, 170);
context.lineWidth = 10;
// line color
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
以上代碼演示了在畫布上繪製貝塞爾曲線。