Canvas计时器

最新推荐文章于 2023-02-22 13:52:19 发布

weixin_30731287

最新推荐文章于 2023-02-22 13:52:19 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/fengyuzhen/p/7212324.html

版权

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>

转载于:https://www.cnblogs.com/fengyuzhen/p/7212324.html

weixin_30731287

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas计时器

Canvas计时器<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ border: 5px dashed #00BFFF; } &l...
复制链接

扫一扫