html5寫的時鐘圓形表盤

2024-09-05 12:19:09

字體：大中小

供稿：網(wǎng)友

html5寫的時鐘，圓形表盤樣式，Canvas實現(xiàn)的，Canvas真是個好東西啊，學(xué)會了可省去很多圖片，比較不錯的說？

<!doctype html><html><head><title>html5實現(xiàn)圓形時鐘</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旋轉(zhuǎn)的太陽系動畫

下一篇：CSS3學(xué)習(xí)筆記之立體盒子動畫代碼