下文，我们结合jquery和canvas来实践一下，如何画扇形。网上很多地方都讲过此类话题，但是其代码过于复杂，不利于初学者学习，因此，本文特地为大家写了最简单的代码。
下面先看效果图，怎么样，挺美观的吧。
一、HTML控件
<canvas id="canvas" width="300" height="300"></canvas>
二、JS代码
function draw()
{
var canvas = document.getElementById('canvas');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
//画扇形
var x=$("#canvas").height()/2;
var y=$("#canvas").width()/2;
var TotalNum=0;
var StartRoteNum=0; //起始角度
var MyArray=new Array();
for(var j=0;j<20;j++)
{
MyArray[j]=parseInt(20*Math.random());
}
for(var k=0;k<MyArray.length;k++)
{
TotalNum = TotalNum + MyArray[k];
//alert(MyArray[k]);
}
for(var i=0;i<=MyArray.length;i++)
{
ctx.beginPath();
if(i==0)
{
ctx.arc(x,y, x/3*2, (Math.PI/180)*0, (Math.PI/180)*360*(MyArray[i]/TotalNum), false);
StartRoteNum = StartRoteNum + (Math.PI/180)*360*(MyArray[i]/TotalNum);
}
else
{
ctx.arc(x,y, x/3*2, StartRoteNum, (Math.PI/180)*360*(MyArray[i]/TotalNum)+StartRoteNum, false);
StartRoteNum = StartRoteNum + (Math.PI/180)*360*(MyArray[i]/TotalNum);
}
ctx.lineTo(x,y);
ctx.fillStyle = 'rgb(' + Math.floor(3) + ',' + Math.floor(54+i*5) + ','+Math.floor(73+i*2)+')';
ctx.fill();
ctx.strokeStyle= 'rgb(' + Math.floor(200) + ',' + Math.floor(200) + ','+Math.floor(200)+')';
ctx.stroke();
ctx.closePath();
ctx.save();
}
}
}