• canvas/CSS实现仪表盘效果


     手机上看比较虚

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>canvas仪表盘动画效果</title>
    		<style type="text/css">
    			html,
    			body {
    				 100%;
    				height: 100%;
    				margin: 0;
    			}
    			
    			canvas {
    				display: none;
    				border: 1px solid red;
    				display: block;
    				margin: 0 auto;
    				background: -webkit-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    				window.requestAnimFrame = (function() {
    					return window.requestAnimationFrame ||
    						window.webkitRequestAnimationFrame ||
    						window.mozRequestAnimationFrame ||
    						function(callback) {
    							window.setTimeout(callback, 1000 / 60);
    						};
    				})();
    				
    				var canvas = document.getElementById('canvas'),
    					ctx = canvas.getContext('2d'),
    					cWidth = canvas.width,
    					cHeight = canvas.height,
    					score = canvas.attributes['data-score'].value,
    					radius = 100, //圆的半径
    					deg0 = Math.PI / 9, //每一格20度
    					mum = 100, //数字步长
    					/*
    					 * 要求:圆弧走完,数字得自加完,就得确定圆弧走的次数和数字走的次数相等!
    					 数字最大10000,对应的度数是11*PI/9,那每个步长mum对应的度数如下:
    					 */
    					deg1 = mum * Math.PI * 11 / 9 / 10000; // 每mum对应的度数
    
    				var angle = 0, //初始角度
    					credit = 0; //数字默认值开始数
    
    				var drawFrame = function() {
    					if(score < 0 || score > 10000) {
    						alert('额度只能是0--10000')
    						score = 10000;
    					}
    					ctx.save();
    					ctx.clearRect(0, 0, cWidth, cHeight);
    					ctx.translate(cWidth / 2, cHeight / 2);
    					ctx.rotate(8 * deg0); //160度
    
    					var aim = score * deg1 / mum; //数字对应的弧度数,先确定要走几次,除以mum,然后计算对应的弧度数
    					if(angle < aim) {
    						angle += deg1;
    					}
    
    					if(credit < score) {
    						credit += mum; //默认数字间隔是mum
    					} else if(credit >= 10000) {
    						credit = 10000;
    					}
    					//信用额度
    					ctx.save();
    					ctx.rotate(10 * deg0);
    					ctx.fillStyle = 'white';
    					ctx.font = '28px Microsoft yahei';
    					ctx.textAlign = 'center';
    					ctx.fillText('信用额度', 0, 50);
    					ctx.restore();
    					//
    					text(credit);
    
    					ctx.save();
    					ctx.beginPath();
    					ctx.lineWidth = 5;
    					ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
    					ctx.arc(0, 0, radius, 0, angle, false); //动画圆环
    					ctx.stroke();
    					ctx.restore();
    					ctx.save();
    					ctx.rotate(10 * deg0); //200度
    					ctx.restore();
    					ctx.beginPath();
    					ctx.strokeStyle = 'rgba(255, 0, 0, .1)';
    					ctx.lineWidth = 5;
    					ctx.arc(0, 0, radius, 0, 11 * deg0, false); //设置外圆环220度
    					ctx.stroke();
    					ctx.restore();
    
    					window.requestAnimFrame(drawFrame);
    
    				}
    
    				function text(process) {
    					ctx.save();
    					ctx.rotate(10 * deg0); //200度
    					ctx.fillStyle = 'red';
    					ctx.font = '40px Microsoft yahei';
    					ctx.textAlign = 'center';
    					ctx.textBaseLine = 'top';
    					ctx.fillText("¥:" + process, 0, 10);
    					ctx.restore();
    				}
    
    				setTimeout(function() {
    					document.getElementById("canvas").style.display = "block";
    					drawFrame();
    				}, 10)
    
    			}
    		</script>
    	</head>
    
    	<body>
    		<canvas id="canvas" width="300" height="300" data-score='8100'></canvas>
    	</body>
    
    </html>
    

      

     

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#yibiao {
    				 400px;
    				height: 200px;
    				background: white;
    				margin: 0 auto;
    				position: relative;
    				overflow: hidden;
    			}
    			
    			.yuan1 {
    				 400px;
    				height: 400px;
    				position: absolute;
    				top: 0px;
    				left: 0px;
    				border-radius: 50%;
    				background: black;
    				opacity: 0.2;
    			}
    			
    			.yuan2 {
    				 360px;
    				height: 360px;
    				position: absolute;
    				top: 20px;
    				left: 20px;
    				border-radius: 50%;
    				background: white;
    			}
    			
    			.clip {
    				 400px;
    				height: 400px;
    				position: absolute;
    				top: 0px;
    				left: 0px;
    				border-radius: 50%;
    				background: blue;
    				clip: rect(200px, 400px, 400px, 0px);
    				transform: rotate(0deg);
    			}
    			
    			.num {
    				position: absolute;
    				 100%;
    				height: 100px;
    				top: 100px;
    				text-align: center;
    				font-size: 100px;
    			}
    		</style>
    		<script type="text/javascript" src=""></script>
    		<script type="text/javascript">
    			$(function() {
    				//默认数字0--10000,默认数字自增步长100
    				var buchang = 200;
    				var deg = 180 * buchang / 10000; //每个步长代表的度数
    				var degs = parseInt($(".num").text()) / buchang * deg; //先计算有几个步长,算出半圆要转的度数
    				var du = 0; //起始度数
    				var bu = 0; //数字自增步长
    				function zhuan() {
    
    					$(".clip").css("transform", "rotate(" + du + "deg)");
    					$(".num").text(bu);
    					du += deg;
    
    					
    					bu += buchang;
    					if(du >= degs) {
    						 clearInterval(setin);
    					}
    
    				}
    				var setin = setInterval(zhuan, 30)
    
    			})
    		</script>
    	</head>
    
    	<body>
    		<div id="yibiao">
    			<div class="yuan1"></div>
    			<div class="clip"></div>
    			<div class="yuan2"></div>
    			<div class="num">5000</div>
    		</div>
    	</body>
    
    </html>
    

      




    <!doctype html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8" />
    		<title>CSS 仪表盘</title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<style type="text/css">
    			* {
    				margin: 0px;
    				padding: 0px;
    				border: 0px;
    			}
    			
    			html,
    			body {
    				 100%;
    				height: 100%;
    				background: -webkit-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
    			}
    			
    			.sb {
    				background: transparent;
    				box-sizing: border-box;
    				 400px;
    				height: 272.8px;
    				/*272.8px:220度*/
    				margin: 0 auto;
    				position: relative;
    				overflow: hidden;
    			}
    			
    			.deg0 {
    				position: absolute;
    				 400px;
    				height: 400px;
    				background: red;
    				border-radius: 50%;
    				top: 0px;
    				left: 0px;
    			}
    			
    			.deg1 {
    				position: absolute;
    				 370px;
    				height: 370px;
    				background: -webkit-linear-gradient(top, #0E83F5 0%, #169BF5 100%);
    				border-radius: 50%;
    				top: 15px;
    				left: 15px;
    				z-index: 1000;
    			}
    			
    			.clip1 {
    				position: absolute;
    				 400px;
    				height: 400px;
    				background: green;
    				border-radius: 50%;
    				top: 0px;
    				left: 0px;
    				clip: rect(0px, 200px, 200px, 0px);
    				transform: rotate(-113deg);
    				/*对应90+23*/
    			}
    			
    			.clip2 {
    				position: absolute;
    				 400px;
    				height: 400px;
    				background: green;
    				border-radius: 50%;
    				top: 0px;
    				left: 0px;
    				clip: rect(0px, 400px, 200px, 200px);
    				transform: rotate(113deg);
    			}
    			
    			.clip3 {
    				position: absolute;
    				 400px;
    				height: 400px;
    				background: green;
    				border-radius: 50%;
    				top: 0px;
    				left: 0px;
    				clip: rect(200px, 200px, 400px, 0px);
    				transform: rotate(-23deg);
    				/*对应20度*/
    			}
    			
    			.clip4 {
    				position: absolute;
    				 400px;
    				height: 400px;
    				background: green;
    				border-radius: 50%;
    				top: 0px;
    				left: 0px;
    				clip: rect(200px, 400px, 400px, 200px);
    				transform: rotate(23deg);
    				/*对应20度*/
    			}
    			
    			p.num {
    				position: absolute;
    				 400px;
    				height: 200px;
    				top: 150px;
    				color: red;
    				text-align: center;
    				font-size: 100px;
    				z-index: 10000;
    			}
    		</style>
    		<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function() {
    				var sbs = 9000;
    				//默认数字0--10000,默认数字自增步长100
    				var buchang = 100;
    				var deg = 220 * buchang / 10000; //每个步长代表的度数  2.2
    				var degs = sbs / buchang * deg; //先计算有几个步长,算出半圆要转的度数
    				var du = -23; //起始度数
    				var num = 0;
    				console.log(degs)
    				var sb = setInterval(function() {
    					$(".num").text(num);
    					if(du <= 67) {
    						$(".clip3").css("transform", "rotate(" + du + "deg)");
    					} else if(du > 67 && du <= 157) {
    						$(".clip3").css("transform", "rotate(67deg)");
    						$(".clip1").css("transform", "rotate(" + (-23 + (du - 67)) + "deg)");
    					} else if(du > 157 && du <= 220) {
    						$(".clip3").css("transform", "rotate(67deg)");
    						$(".clip1").css("transform", "rotate(67deg)");
    						$(".clip4").css("transform", "rotate(90deg)");
    						$(".clip2").css("transform", "rotate(" + (-23 + (du - 157)) + "deg)");
    					}
    
    					if(du >= degs || num >= sbs) {
    						clearInterval(sb)
    					}
    					du += deg;
    
    					num += buchang;
    				}, 20)
    			})
    		</script>
    	</head>
    
    	<body>
    		<div class="sb">
    			<div class="deg0">
    				<div class="deg1"></div>
    			</div>
    			<div class="clip1"></div>
    			<div class="clip2"></div>
    			<div class="clip3"></div>
    			<div class="clip4"></div>
    			<p class="num">0</p>
    		</div>
    	</body>
    
    </html>
    

      

    关于requestAnimationFrame

          requestAnimationFrame不需要使用者指定循环间隔时间,浏览器会基于当前页面是否可见、CPU的负荷情况等来自行决定最佳的帧速率,从而更合理地使用CPU。

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			window.onload = function() {
    
    				var id = null;
                    var i=0;
    				function a(time) {
    					console.log(i++);
    					id = window.requestAnimationFrame(a);
    			
    				}
                    function b(){
                    	window.cancelAnimationFrame(id);
                    }
    				document.getElementById("start").onclick=a;   //相当开始
                    document.getElementById("zantin").onclick=b;   //相当暂停
    			}
    		</script>
    	</head>
    
    	<body>
    		<button id="start">开始</button>
    		<button id="zantin">暂停</button>
    	</body>
    
    </html>
    

      

     

    点击开始,此时控制台一直计数下去,点击暂停,计数器暂停,再次点击开始会从原来的位置继续计数下去。

  • 相关阅读:
    非重复随机序列生成算法
    IE浏览器整页截屏程序
    地铁线路图的设计与实现
    拓扑排序算法的一个应用
    洛谷 P4450 双亲数
    洛谷 P2183 [国家集训队]礼物
    洛谷 P4159 [SCOI2009]迷路
    CF86D Powerful array
    Catalan数
    SP3266 KQUERY Kquery
  • 原文地址:https://www.cnblogs.com/libin-1/p/6111480.html
Copyright © 2020-2023  润新知