本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第2章，第2.5节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.5 高级路径方法
接下来深入探讨一下其他绘制路径的方法，包括弧线和曲线，以组合成复杂的图像。
2.5.1 弧线
有4种函数可以绘制弧线和曲线。弧线可以是一个整圆，也可以是圆的任何一部分。
1．context.arc()
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
AI 代码解读
x和y定义圆心的位置，radius定义弧线的半径。startAngle和endAngle使用弧度值，而不是角度值。anticlockwise可以是true或false这两个值，用于定义弧线的方向。例如，绘制一个圆心在（100，100），半径为20的圆，如图2-4所示，可以使用下面这段drawScreen()代码。
context.arc(100, 100, 20, (Math.PI/180)0, (Math.PI/180)360, false);
例2-4显示创建一个简单圆形所必须的代码。
例2-4 圆弧
function drawScreen(){
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 5;
context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);
//整圆
context.stroke();
context.closePath();
}
AI 代码解读
图2-4 圆
注意，这里应将起始角度（0）和结束角度（360）乘以（Math.PI/180）来将其转换为弧度。使用0和360，可以创建一个完整的圆形。
如果不以0到360作为起止点，则可以绘制出一段圆弧。下面这段drawScreen()代码将按顺时针方向画四分之一个圆，如图2-5所示。
context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);
AI 代码解读
如果要画0～90以外的部分，如图2-6所示，可以将anticlockwise值设置为true。
context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);
AI 代码解读
2．context.arcTo()
context.arcTo(x1, y1, x2, y2, radius)
AI 代码解读
只有最新的一些浏览器支持arcTo方法，这个函数以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到（x1，y1）点的直线相切，圆弧的终点与（x1，y1）点到（x2，y2）的直线相切。
context.arcTo方法要求当前路径至少有一个子路径。那么，如果从（0，0）到（100，200）画一条直线，然后创建一条小弧线，这看起来会有点像一个钢丝衣架（没有更好的比喻了），如图2-7所示。
context.moveTo(0,0);
context.lineTo(100, 200);
context.arcTo(350,350,100,100,20);
AI 代码解读
2.5.2 贝塞尔曲线
贝塞尔曲线要比弧线灵活得多，它有立方和平方两种形式。
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)
AI 代码解读
在二维空间中，贝塞尔曲线通过“起点”、“终点”以及两个决定曲线走向的“控制”点定义完成。一个普通的立方贝塞尔曲线使用两个点，平方贝塞尔曲线使用一个点。平方贝塞尔曲线是最简单的曲线，如图2-8所示，只需要终点以及一个控制点即可完成绘制。
context.moveTo(0,0);
context.quadraticCurveTo(100,25,0,50);
AI 代码解读
这条曲线从（0，0）开始，到（0，50）结束，用来创建弧线的点位于（100，25），这个点大致上是圆弧的圆心。控制点的x值100把弧线拉伸成一个细长的曲线。
立方贝塞尔曲线具有两个控制点，因此带来了更多的选择，从而能够很容易地绘制出经典的“S”形曲线（如图2-9所示）。
context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);
AI 代码解读
2.5.3 Canvas裁切区域
结合save()函数和restore()函数，Canvas裁切区域可以限制路径及其子路径的绘制区域。首先通过rect()函数设置一个用来绘图的矩形区域，然后调用clip()函数把用rect()函数定义的矩形设置为裁切区域。现在，无论在当前上下文绘制什么内容，它只显示裁切区域以内的部分。这也可以理解成是绘图操作的一种蒙版。例2-5显示如何操作，裁切结果如图2-10所示。
例2-5 Canvas裁切区域
function drawScreen(){
//在屏幕上绘制一个大方块
context.fillStyle = "black";
context.fillRect(10, 10, 200, 200);
context.save();
context.beginPath();
//裁切画布从（0，0）点至50*50的正方形
context.rect(0, 0, 50, 50);
context.clip();
//红色圆
context.beginPath();
context.strokeStyle = "red"; //需要可用颜色列表
context.lineWidth = 5;
context.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
//整圆
context.stroke();
context.closePath();
context.restore();
//再次裁切整个画布
context.beginPath();
context.rect(0, 0, 500, 500);
context.clip();
//绘制一个没有裁切的蓝线
context.beginPath();
context.strokeStyle = "blue"; //需要可用颜色列表
context.lineWidth = 5;
context.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false);
//整圆
context.stroke();
context.closePath();
}
AI 代码解读
例2-5首先在画布上画了一个200×200的黑色矩形，然后将Canvas裁切区域设置为rect(0,0,50,50)，clip()函数按照这些参数对画布进行裁切设置，所画的红色圆弧形只能看到在这个矩形以内的部分，最后将裁切区域调整回rect(0,0,500,500)并画一个新的蓝色圆弧，此时整个圆都能够看到。
提示：
也可以将其他Canvas方法配合裁切区域使用，最常见的的是arc()函数。
arc(float x, float y, float radius, float startAngle,
float endAngle, boolean anticlockwise)
AI 代码解读
这可以创建一个圆形的裁切区域，而不是矩形的裁切区域。
