1.画圆弧
在canvas中，可以通过arc来绘制一个圆或者火狐，我们先来看看绘制之后的圆和圆弧长什么样
上代码
var c1=document.querySelector('#c1')
var ctx=c1.getContext('2d')
ctx.translate(250,250)
ctx.arc(0,0,100,0,90*(Math.PI/180))
ctx.fill()
上面的代码，首先将画笔移到250，250的位置，之后，画一个圆心在0，0，半径100，起始角是0，结束角是90的圆弧，看看效果
image.png
2.画扇形
这里大概来总结一下，上面的圆弧是怎么来的，其实canvas中，定义好起点和终点，然后将起点和终点连接起来之后，就形成了形状，至于起点和终点之间的形状长什么样，完全由调用的api来决定，比如上面的圆弧
有了上面的总结，那么我们要画扇形就简单了，圆弧已经有了两个点，接着我们再定义一个点，把三点连起来就行了；不错，聪明的你一定想到了，把圆心点连接上圆弧的起点和终点，就形成了一个扇形
image.png
来看看实现的代码
var c1=document.querySelector('#c1')
var ctx=c1.getContext('2d')
ctx.translate(250,250)
ctx.moveTo(0,0)
ctx.arc(0,0,100,0,90*(Math.PI/180))
ctx.fill()
仅仅是多了moveTo，它的意义就是将画笔移动到这个api的第一个参数和第二个参数位置
3.画饼图
扇形有了，那个饼图是不是就简单了，但是这里还有一点要说的，就是每一个扇区我们应该用颜色来区分，此处我们要用到fillStyle和beginPath,fillStyle就为fill填充样式，这里可以写一个渐变的变量或者直接填充颜色，示例是颜色，beginPath即开启一段新路径，即开启新路径之后，新路径的设计都不影响到老路径的设置，本示例中，新的扇区的颜色不影响老扇区的颜色，ok，上代码了
function tranRad(deg){
return deg*(Math.PI/180)
}
var c1=document.querySelector('#c1')
var ctx=c1.getContext('2d')
ctx.translate(250,250)
ctx.moveTo(0,0)
ctx.arc(0,0,100,0,tranRad(90))
ctx.fillStyle = 'red'
ctx.fill()
ctx.beginPath()
ctx.moveTo(0,0)
ctx.arc(0,0,100,tranRad(90),tranRad(135))
ctx.fillStyle='green'
ctx.fill()
ctx.beginPath()
ctx.moveTo(0,0)
ctx.arc(0,0,100,tranRad(135),tranRad(345))
ctx.fillStyle ='gray'
ctx.fill()
ctx.beginPath()
ctx.moveTo(0,0)
ctx.arc(0,0,100,tranRad(345),tranRad(360))
ctx.fillStyle = 'orange'
ctx.fill()
image.png
ok，一个简单的饼图就这样完成了，是不是很easy
4.添加文本
一般文本的位置，刚好是扇形中间的位置外延一定的距离，如下图所示
image.png
每一个黑点就是文本要在的位置，由图中可以看出，我们定义这个点的长度为（R+20）,其中R是圆的半径，20是外延的距离，那么我们可以通过con算出这个点的x坐标，通过sin算出这个点的y左边，这样就能计算出了文本的位置了，
最后的效果图如下
image.png
Ok，一个pie图就这么完成了
网友评论