先看效果：
以下是實現代碼，包含畫扇形函數：
<canvas id="canvashovertree" width="150" height="150"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvashovertree");
function DrawSector(canvas_tag,start_angle,angle,radius,fill,anticlockwise){
var centerPoint = {x:75,y:75};
start_angle = start_angle || 0;
if (canvas_tag.getContext){
//開始繪制路徑
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//畫出弧線
ctx.arc(centerPoint.x,centerPoint.y,radius,start_angle,angle,anticlockwise);
//畫出結束半徑
ctx.lineTo(centerPoint.x,centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
}else{
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
//畫一個起始角度為45度，結束角度為90度，繪圖方向順時針的填充扇形
DrawSector(canvas,Math.PI/4,Math.PI/2,50,true,false);
//畫一個起始角度為-90度，結束角度為-135度，繪圖方向逆時針的未填充扇形
//DrawSector(canvas,-Math.PI/2,-Math.PI*3/4,50,false,true);
</script>
當然還可以對扇形進行顏色填充，請看：
http://hovertree.com/texiao/html5/15/