qq_28705967
qq_28705967
采纳率33.3%
2016-05-17 10:00

canvas和setInterval很诡异的问题

已采纳

本人萌新,写了一个关于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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • showbo GoCityPass新加坡曼谷通票 5年前

    setInterval是同时进行的,而且绘制扇形操作的是同一个变量,所以3个计时器效果都是最后一个的eAngle ,并且你只能清除最后一次的计时器,另外2个计时器还会一直运行,浪费资源

    要设置不同eAngle ,不要操作同一个变量

    点赞 1 评论 复制链接分享