用圆角属性做出扇形，再用一个矩形去遮挡
宽高相等画出正方形
加border-radius属性做出1/4圆或者1/2圆
矩形旋转
例如transform: rotate(45deg) 顺时针旋转45度
以上都在一个position:relative的父元素中，要旋转的矩形position:absolute
用js控制矩形旋转的角度，应该就可以了
<html><head>
<meta charset="utf-8">
</head>
<body>
<canvas id="cvs" width="200" height="200"></canvas>
<script>
//扇形对象
CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {
// 初始保存
this.save()
// 位移到目标点
this.translate(x, y)
this.beginPath()
// 画出圆弧
this.arc(0,0,radius,sDeg, eDeg)
// 再次保存以备旋转
this.save()
// 旋转至起始角度
this.rotate(eDeg)
// 移动到终点，准备连接终点与圆心
this.moveTo(radius,0)
// 连接到圆心
this.lineTo(0,0)
// 还原
this.restore()
// 旋转至起点角度
this.rotate(sDeg)
// 从圆心连接到起点
this.lineTo(radius,0)
this.closePath()
// 还原到最初保存的状态
this.restore()
return this
}
//执行
function start(degrees){
var ctx = document.getElementById('cvs').getContext('2d')
degrees++
ctx.sector(100,100,50,0,Math.PI/180*degrees).fill()
if(degrees<360){
setTimeout('start('+degrees+')',10)
}else{
alert('画完了')
}
}
start(1)
</script>
</body>
</html>
