html5动画基础（canvas,闹钟）

最新推荐文章于 2023-04-07 11:00:00 发布

elegancy_

最新推荐文章于 2023-04-07 11:00:00 发布

阅读量1.7k

点赞数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#clock{background:#abcdef}
</style>
</head>
<body>
<canvas id="clock" width="500" height="500">当前浏览器不支持canvas标签</canvas>
<script>
	var canvas=document.getElementById('clock');	//获取ID
	var cxt=canvas.getContext('2d');
	
	
function drawClock(){
	cxt.clearRect(0,0,500,500);	//清除画布
	
	var now=new Date();
	var sec=now.getSeconds();
	var min=now.getMinutes();
	var hour=now.getHours();
	var hour=hour+min/60;
	//hour=hour>12?hour=12:hour;	//进制转换
	
	
//表盘（蓝色）
	cxt.lineWidth=10;
	cxt.strokeStyle="blue";
	cxt.beginPath();
	cxt.arc(250,250,200,0,360,false);	//false逆时针，true顺时针
	cxt.stroke();
	cxt.closePath();
//刻度（黑色）
	//时刻度
	for(var i=0;i<12;i++){
		cxt.save();		//保存当前状态
		cxt.lineWidth=7;
		cxt.strokeStyle="#000";
		cxt.translate(250,250);		//先设置原点
		cxt.rotate(i*30*Math.PI/180);	//再设置旋转角度	弧度=角度*Math.PI/180
		cxt.beginPath();	//画线
		cxt.moveTo(0,-170);
		cxt.lineTo(0,-190);
		cxt.closePath();
		cxt.stroke();
		cxt.restore();	//恢复原点
	}
	//分刻度
	for(var i=0;i<60;i++){
		cxt.save();	
		cxt.lineWidth=5;
		cxt.strokeStyle="#000";
		cxt.translate(250,250);	
		cxt.rotate(i*6*Math.PI/180);
		cxt.beginPath();
		cxt.moveTo(0,-180);
		cxt.lineTo(0,-190);
		cxt.closePath();
		cxt.stroke();
		cxt.restore();	
	}
//时针（黑色）
	cxt.save();		//设置原点
	cxt.lineWidth=7;	//设置时针风格
	cxt.strokeStyle="#000";
	cxt.translate(250,250);		//设置原点
	cxt.rotate(hour*30*Math.PI/180);
	cxt.beginPath();	//画线
	cxt.moveTo(0,-120);
	cxt.lineTo(0,10);
	cxt.closePath();
	cxt.stroke();
	cxt.restore();		//设置原点
//分针（黑色）
	cxt.save();		
	cxt.lineWidth=5;	
	cxt.strokeStyle="#000";
	cxt.translate(250,250);		
	cxt.rotate(min*6*Math.PI/180);
	cxt.beginPath();	
	cxt.moveTo(0,-160);
	cxt.lineTo(0,10);
	cxt.closePath();
	cxt.stroke();
	cxt.restore();
//秒针（红色）
	cxt.save();		
	cxt.lineWidth=3;	
	cxt.strokeStyle="#f00";
	cxt.translate(250,250);		
	cxt.rotate(sec*6*Math.PI/180);
	cxt.beginPath();	
	cxt.moveTo(0,-170);
	cxt.lineTo(0,20);
	cxt.closePath();
	cxt.stroke();
	cxt.restore();
}
	
//使用setInterval,让针动起来
	setInterval(drawClock,1000);
</script>
</body>
</html>

运行效果：