Canvas计时器

Canvas计时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			canvas{
				border: 5px dashed #00BFFF;
			}
		</style>
	</head>
	<body>
		<canvas id="o1" width="300" height="300"></canvas>
		<canvas id="o2" width="300" height="300"></canvas>
		<canvas id="o3" width="300" height="300"></canvas>
	</body>
<script>
　　
        var can1 = o1.getContext("2d");
        var can2 = o2.getContext("2d");
        var can3 = o3.getContext("2d");
        var a = 30 ,b = 50, c = 60;
    
        Tu(a,can1)
        Tu(b,can2)
        Tu(c,can3)
        function Tu(num,can){
            var s = 0;
            var t = setInterval(move,1000/num);
            function move(){
                s++;
                if(s>=num){
                    clearInterval(t);
                }
                var degs = s/100 *Math.PI*2; 
                
                can.save();
                can.clearRect(0,0,300,300)
                can.translate(150,150);
                can.rotate(-Math.PI/2);
                can.lineWidth = "30";
                can.strokeStyle = "#00BFFF";
                can.beginPath();
                can.arc(0,0,100,0,degs);
                can.stroke();
                can.closePath();
                can.restore();
                
                can.font="60px 宋体";
                can.textAlign = "center";
                can.textBaseline ="middle"
                can.fillText(s+"%",150,150);
                
                
                
                
                
            }
            
            
        }
    
    </script>

 

</html>

　　

posted @ 2017-07-20 17:17  冯玉真  阅读(393)  评论(0)  编辑  收藏  举报