我们都讲了四期API的知识了，估计大家看的也是枯燥的很啊，前面的小实例也是太简单，简直不解渴啊，但是也不能一口气就吃成一个胖子，下面再给大家来一个小实例，给大家提提神！
前面在讲画圆的时候，给大家留了一个思考，或者说是一个坑吧，就是如何来画一个扇形？我们知道画圆的方法是无法一下子就能画出一个扇形的，我当时提供了一个方法，不知道大家是否有印象，没印象没关系，我再复述一遍：就是如果我画了一个圆弧，然后在圆心画2条线，分别连在圆弧的起始点和结束点，那么这不就是一个圆吗？那么这个方法到底能不能画出一个圆呢？其实我也不知道，那我们就试一下：
第一步，画一个圆弧：
//将原点移到100,100的位置 ctx.translate(100, 100); //画一个圆弧 ctx.arc(0,0,100,30*Math.PI/180, 60*Math.PI/180); ctx.stroke();
此时就是我们熟悉的画圆弧的方法，现在要开始画线了，这才是关键，我们先分析一下，磨刀不费砍柴工嘛！
一条直线是由2个点构成，现在我们知道圆心这点，第2个点就是圆弧的起始点和结束点，那么这2的坐标我们怎么得到呢？我们画图来分析一下：
我们大概就是要画这样一个扇形，画的比较丑，将就看一下，如果我们按照数学思路，根据角度公式一通算，或许能得到这2个点的坐标，但是我感觉我自己想想都觉得这运算该有多么的复制，我数学不好，不愿意算，有没有一种简便的方法呢，可以不用那么的懂脑筋的？（抱歉，我的“内存”明显感到不足）我有一个大胆的假设，就是如果这个扇形不是这样斜着的，而是一边的水平的，比如说这样：
那么我就可以很容易的得到第一条线段了，就是横坐标上的那条线，你不懂？好吧，是这样的，圆心坐标我们知道，半径我们知道，那弧的起点坐标就很容易啦，懂了吧，那另一条线怎么弄呢？如果你刚看完上一期API的知识，我们趁热，很容易就能想到rotate()方法，就是我们再画一条圆心到起点的线，圆弧的角度我们是知道的，好，我们将新画的这条线选择圆弧的角度，那不就到终点了吗？我靠，我TM太机智了！我们来试一下：
//圆弧 ctx.save(); ctx.translate(100, 100); ctx.arc(0,0,100,0, 30*Math.PI/180); ctx.restore(); //第一条线 ctx.save(); ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.restore(); //第二条线 ctx.save(); ctx.translate(100, 100); ctx.moveTo(0,0); ctx.rotate(30*Math.PI/180); ctx.lineTo(100,0); ctx.stroke(); ctx.restore();
哇塞，简直眼前一亮啊，果然可以啊，按照这思路，如果我们现在把这个扇形旋转一个角度，这个角度=第二条线的角度-第一条线的角度，那么得到的不就是前面我们需要的那个扇形吗？但是前面的代码直接旋转只能旋转圆弧，线旋转不了，我们修改一下：
还是看这张图吧，我们可以换一个思路，如果圆弧画在目标位置，然后画2条角度为0的2条线，再旋转到圆弧的起始点和结束点，不就行了吗？（因为圆弧的起始角度和结束角度我们是知道的）试试吧：
//将原点设置100,100位置 ctx.translate(100,100); //原点在100,100，则圆心设为0,0 ——> 100,100的位置 ctx.arc(0,0,100,30*Math.PI/180,60*Math.PI/180); //save(),restore()是为了防止角度旋转的污染 ctx.save(); ctx.rotate(30*Math.PI/180); ctx.moveTo(0,0); ctx.lineTo(100,0); ctx.restore(); ctx.rotate(60*Math.PI/180); ctx.moveTo(0,0); ctx.lineTo(100,0); ctx.stroke();
哎呀，真的可以啊，哈哈，有人会问，你的第一步为什么是设置原点呢，为什么不用moveTo来设置起始点呢？好问题，因为画布的默认原点在0,0的位置上，如果用moveTo来设置起始点，原点依然还在0,0的位置，上一节API我们将变换的时候讲到，变换是以原点为基准点的，即使你设置了起始点，但是起始点不是原点的话，图形旋转依然会围绕0,0点旋转然后自转，得到的图形就不知道是什么图形了，偏差的角度就很难矫正，对此还是不太明白的同学可以自己写一个例子体验一样，或许理解更深刻一点，这里就作为练习题，不在这里写了！
上面的代码还是可以优化的，比如说画第一条线的时候，我们用到了save()和restore()，其作用不只是可以防止外面的属性或方法对里面的绘制产生影响，它的本质意思是save()保存当前环境的状态，restore()返回之前保存路径的状态，这是什么意思，举个栗子，save()就像是在一个迷宫的入口，restore()就想是这个迷宫的出口，但是发现这里就是迷宫的路口，出了迷宫，在迷宫里具体是怎么走的，根本不知道，这就可以防止你的外部因素来影响你走迷宫的路线，那有一个细节大家要注意，就是当你进去的这个门，你出来的时候还是这个门，恩，这个就可以利用了，这就相当于是画笔的触点了，还原触点，我们看一下还原的触点在什么地方：
//将原点设置100,100位置 ctx.translate(100,100); //原点在100,100，则圆心设为0,0 ——> 100,100的位置 ctx.arc(0,0,100,30*Math.PI/180,60*Math.PI/180); //save(),restore()是为了防止角度旋转的污染 ctx.save(); ctx.rotate(30*Math.PI/180); ctx.moveTo(0,0); ctx.lineTo(100,0); ctx.restore(); ctx.rotate(60*Math.PI/180); ctx.lineTo(100,0); ctx.stroke();
居然得到的是这样的结果，从第2张图可以看出还原的触点的位置在圆弧的初始点，其实这里我们是忽略了一个问题，就是线在旋转的时候，是从它的起点为圆心旋转的，而上面的代码是，第一条线从圆心开始，到圆弧的起点（旋转过后），自然现在的起点就是圆弧的起点了，第二条线怎么画，它旋转的结果都不是我们想要的了，所以这里我们需要特别的注意，现在我们将第一条直线的起点设在（r,0）的位置，旋转后就到了圆弧的起始点，然后在画到圆心地方，那现在的起始点就是圆心了，再画一条线到圆弧，就哦了，现在我们再来一次：
//将原点设置100,100位置 ctx.translate(100,100); //原点在100,100，则圆心设为0,0 ——> 100,100的位置 ctx.arc(0,0,100,30*Math.PI/180,60*Math.PI/180); //save(),restore()是为了防止角度旋转的污染 ctx.save(); ctx.rotate(30*Math.PI/180); ctx.moveTo(100,0); ctx.lineTo(0,0); ctx.restore(); ctx.rotate(60*Math.PI/180); ctx.lineTo(100,0); ctx.stroke();
看，这就是我们想要的图形，所以，上面所犯的几个错都是比较容易犯的错，需要特别的注意！
根据这个原理，我们其实还可以用另外一种方式，就是充分使用触点的作用，怎么讲，当我们再画圆弧的时候，画完之后其触点在圆弧的结束位置，如此的天赐良机，为何不直接将这个触点作为起点，画一条到圆心的线，不就可以少旋转一次吗？然后再画第二条线，简直感觉省时省力，我们看看效果吧：
//将原点设置100,100位置 ctx.translate(100,100); //原点在100,100，则圆心设为0,0 ——> 100,100的位置 ctx.arc(0,0,100,30*Math.PI/180,60*Math.PI/180); //以圆弧终点为起点画直线 ctx.lineTo(0,0); ctx.rotate(30*Math.PI/180); //以0,0为起点画直线 ctx.lineTo(100,0); ctx.stroke();
你看，用这个理论，就连save(),restore()都可以省了，因为就只有一个旋转，代码也少了好多，效果还一样，哈哈，为了能重复使用，我们需要把他封装一下：
第一种：
CanvasRenderingContext2D.prototype.sector = function(x,y,r,sDeg,eDeg){
this.save();
this.translate(x,y);
this.beginPath();
this.arc(0,0,r,sDeg*Math.PI/180,eDeg*Math.PI/180);
this.save();
this.rotate(sDeg*Math.PI/180);
this.moveTo(r,0);
this.lineTo(0,0);
this.restore();
this.rotate(eDeg*Math.PI/180);
this.lineTo(r,0);
this.restore();
return this;
}
ctx.sector(100,100,100,30,60).stroke();
ctx.sector(100,100,100,90,120).fill();
ctx.sector(100,100,100,160,180).stroke();