master

分支 (1)

管理

管理

master

aaa
/
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				/*background: #000;*/
				overflow: hidden;
			}
			canvas {
				background: #ccc;
			}
		</style>
	</head>

	<body>
		<canvas id="c1" width="800" height="600">
			<span>要升级了</span>
		</canvas>
	</body>

</html>
<script>
	//随机数函数
	function random(n, m) {
		return Math.floor(Math.random() * (m - n) + n);
	};
	//角度转弧度封装函数
	function d2a(n){
		return n*Math.PI/180;
	}
	var oC = document.getElementById('c1');
	//定义画笔
	var gd = oC.getContext('2d');
	//设置线宽
	gd.lineWidth=20;
	//设置颜色
	gd.strokeStyle='red';
	//设置圆的参数
	var cx=300;
	var cy=200;

//	画圆封装函数
	function drawArc(x,y,r,start,end,color){	//x,y:圆心坐标;r:圆心半径;start:起始角度;end:结尾角度;
		start = start-90;	//重新定义起始角度
		end = end-90;		//重新定义结尾角度
		gd.strokeStyle=color; //设置颜色
		gd.beginPath();		//开始路径
		gd.arc(x,y,r,d2a(start),d2a(end),false)		//绘制弧度
		gd.stroke();	//描边
	}

	setInterval(function(){
		gd.clearRect(0,0,oC.width,oC.height);	//清除画布
		var oDate=new Date();		//获取时间
		var h=oDate.getHours();		//时
		var m=oDate.getMinutes();	//分
		var s=oDate.getSeconds();	//秒
		var ms = oDate.getMilliseconds();	//获取毫秒数；
		drawArc(cx,cy,60,0,(h*30+m/60*30)%360,'#'+random(100,999)+'');
		drawArc(cx,cy,80,0,m*6+s/60*6,'#'+random(100,999)+'');
		drawArc(cx,cy,100,0,s*6+ms/1000*6,'#'+random(100,999)+'');
	},1000)
</script>