1.3.1 画弧线
画弧线的方法是 arc() 。每条弧线都需要由中心点、半径、起始角度（弧度n*Math.PI）、结束
角度（弧度m*Math.PI）和绘图方向（顺时针 false 还是逆时针 true ）这几个参数来确定。如：
<script>
context.arc(x, y, radius, startAngle, endAngle, antiClockwise); </script>
另外，我们还可以用arcTo()方法来画弧线，用来在路径中绘制圆角，具体内容详见1.4.3。效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
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; // 设置线的颜色
context.strokeStyle = "black"; context.stroke(); };
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="250"></canvas>
</body>
</html>
弧线的有关解释
由上图可见，一条弧线无非就是一个以中心点为圆心，指定半径的圆的一部分。这个圆的一部分就是圆周上，从 startAngle 到 endAngle 的部分，其中 startAngle 和 endAngle 都用弧度来表示。而最后一个方向参数则是指的从 startAngle 到 endAngle 两点之间画线的方向是否为逆时针，默认情况下这个参数是false，因此也就是顺时针画线。
1.3.2 二次曲线二次曲线使用 quadraticCurveTo() 方法来绘制。每条二次曲线要由上下文点、一个控制点和一个终止点来定义。
<script>
context.quadraticCurveTo(controlX, controlY, endX, endY); </script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
context.beginPath(); context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
// line color
context.strokeStyle = "black"; context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
关于二次曲线的说明
二次曲线就是如上图所示的样式，控制点通过分别与上下文点和终止点之间的虚拟切线控制曲线的
形状。其中上下文点由 moveTo() 方法在调用 quadraticCurveTo() 方法前指定。控制点离上下文点和终止点越远，曲线就越尖锐，反之，曲线则越平缓。
1.3.3 贝塞尔曲线
绘制贝塞尔曲线使用方法 bezierCurveTo() 。每条贝塞尔曲线需要由上下文点、两个控制点和一个终止点来确定。由于贝塞尔曲线有两个控制点，因此贝塞尔曲线可以比二次曲线更加的复杂多变。如：
<script>
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); </script>
效果图
代码
<!DOCTYPE HTML>
<html>
<head>
<style> body { margin: 0px; padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style> <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
context.beginPath(); context.moveTo(188, 130);
context.bezierCurveTo(140, 10, 388, 10, 388, 170); context.lineWidth = 10; // 设置线的颜色
context.strokeStyle = "black";
context.stroke(); };
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
关于贝塞尔曲线的说明
由上图可见，贝塞尔曲线由当前上下文点、两个控制点和终止点确定。贝塞尔曲线的第一部分是由上下文点和第一个控制点确定的虚拟线的切线，第二部分则是由第二个控制点和终止点确定的虚拟线的切线。