html5写的时钟圆形表盘

2024-09-05 12:19:09

字体：大中小

来源：转载

供稿：网友

html5写的时钟，圆形表盘样式，Canvas实现的，Canvas真是个好东西啊，学会了可省去很多图片，比较不错的说？

<!doctype html><html><head><title>html5实现圆形时钟</title></head><body><canvas id="canvas" width="900" height="900" style="background:#ff9900"></canvas><script>var canvas=document.getElementById('canvas');var cxt=canvas.getContext('2d');function shizhong() {	cxt.clearRect(0,0,900,900)	var now=new Date();	var sec=now.getSeconds();	var min=now.getMinutes();	var hour=now.getHours();	hour=hour+min/60;	hour=hour>12?hour-12:hour;		cxt.beginPath();		cxt.lineWidth=20;		cxt.strokeStyle="blue";		cxt.arc(300,400,300,0,360,false);		cxt.stroke();		cxt.closePath();			for(var i=0;i<12;i++){				cxt.save();				cxt.lineWidth="10";				cxt.strokeStyle="black";				cxt.translate(300,400);				cxt.rotate(i*30*Math.PI/180);				cxt.beginPath();				cxt.moveTo(0,-220);				cxt.lineTo(0,-290);				cxt.stroke();				cxt.closePath();				cxt.restore();			}		for(var i=0;i<60;i++){			cxt.save();			cxt.lineWidth=5;			cxt.strokeStyle="black";			cxt.translate(300,400);			cxt.rotate(i*6*Math.PI/180);			cxt.beginPath();			cxt.moveTo(0,-270);			cxt.lineTo(0,-290);			cxt.closePath();			cxt.stroke();			cxt.restore();		}		cxt.save();		cxt.translate(300,400);		cxt.lineWidth=8;		cxt.strokeStyle="#000";		cxt.beginPath();		cxt.rotate(hour*30*Math.PI/180);		cxt.moveTo(0,-150);		cxt.lineTo(0,10);		cxt.closePath();		cxt.stroke();		cxt.restore();		cxt.save();		cxt.lineWidth=5;		cxt.strokeStyle="#000";		cxt.translate(300,400);		cxt.rotate(min*6*Math.PI/180);		cxt.beginPath();		cxt.moveTo(0,-180);		cxt.lineTo(0,10);		cxt.stroke();		cxt.closePath();		cxt.restore();		cxt.save();		cxt.lineWidth=2;		cxt.strokeStyle="red";		cxt.translate(300,400);		cxt.rotate(sec*6*Math.PI/180);		cxt.beginPath();		cxt.moveTo(0,-240);		cxt.lineTo(0,10);		cxt.stroke();		cxt.closePath();		cxt.restore();}setInterval(shizhong,1000);</script></body></html>

上一篇：html5旋转的太阳系动画

下一篇：CSS3学习笔记之立体盒子动画代码