三、曲线 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>
以上代码演示了在画布上绘制贝塞尔曲线。