问题描述
- 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>
解决方案
setInterval是同时进行的，而且绘制扇形操作的是同一个变量，所以3个计时器效果都是最后一个的eAngle ，并且你只能清除最后一次的计时器，另外2个计时器还会一直运行，浪费资源
要设置不同eAngle ，不要操作同一个变量
时间： 2024-12-29 09:59:13