本人萌新，写了一个关于canvas扇形图的动画效果，但是setInterval执行的时候很诡异的只有
第三次才能执行代码，看了半天也不知道哪里出错了，请大神们帮帮忙，感激不尽！！
代码如下,三个框框里面可以输入数字表示百分比
<!DOCTYPE html>
<html>
<head>
<title>扇形图动态效果</title>
<meta http-equiv="content-type" content = "text/html;charset = utf-8">
</head>
<body>
<canvas id = "mycanvas" width = "1200px" height = "400px" style = "border : 1px solid ">
Your website can't support canvas,please update it.
</canvas>
<input id = "part1"><input id = "part2"><input id = "part3">
<button id = "doit" style = "height : 40px" onclick = "drawcircle()"></button>
<script>
var mycanvasg = document.getElementById("mycanvas");
var pen = mycanvasg.getContext("2d");
var x = 600; //x,y为圆心坐标
var y = 300;
var r = 200;
var basicAngle = Math.PI * 2 /100;
var sAngle = Math.random().toFixed(2) * 100 * basicAngle;
var eAngle = sAngle;
//alert("intializing--sAngle is " + sAngle + "eAngle is "+ eAngle);
//alert("basicAngle is " + basicAngle);
var drawtimes = 3;
var amanation_inteval = 1000;
var times;
var xh;
function addZero(object)
{
//执行正常
return object.length = 2 ? object : '0' + object;
}
function randomColors()
{
//执行正常
return "#" + addZero((Math.random().toFixed(2) *100).toString(16)) +addZero((Math.random().toFixed(2) *100).toString(16)) + addZero((Math.random().toFixed(2) *100).toString(16));
}
function drawcircle()
{
for(i = 1;i <= drawtimes;i++)
{
eAngle = parseInt(document.getElementById("part" + i).value) * basicAngle + eAngle;
//alert("bigcircle--sAngle is " + sAngle + "eAngle is "+ eAngle);
//alert("eAngle is " + eAngle + "sAngle is " + sAngle);
pen.fillStyle = randomColors(); //分为两个周期，大周期是不同的颜色，小周期颜色相同
//alert("Excecuted for" + i + "times,color code is " + pen.fillStyle);
xh = setInterval(amanation,amanation_inteval);
}
}
var amanation = function(){
//执行正常
if(sAngle < eAngle)
{
//alert("smallcircle--amanation executed,sAngle is " + sAngle + ",eAngle is " + eAngle);
pen.beginPath();
pen.arc(x,y,r,sAngle,(sAngle + basicAngle));
pen.lineTo(x,y); //这三个语句是路径演算
pen.fill(); //每一次执行完路径绘制以后还要还原sAngle 和eAngle的值
pen.closePath();
sAngle = (basicAngle + sAngle);
}
else
clearInterval(xh);
}
</script>
</body>
</html>
