<!doctype html> <html> <head> <meta charset="utf-8"> <title>H5时钟</title> </head> <body> <canvas height="500" width="500" id="clock" style="background:url(bg.jpg)"></canvas> <audio src="7987.wav" loop autoplay="autoplay"></audio> <script> var can = document.getElementById("clock"); var con = can.getContext("2d"); function clock(){ con.clearRect(0,0,500,500); //开始画圆 con.beginPath(); con.lineWidth=5; con.arc(250,250,200,0,360,false); con.closePath(); con.stroke(); //注释部分为刻度 /*for(var i=0;i<12;i++){ con.save(); con.translate(250,250); con.rotate(i*30*Math.PI/180); con.beginPath(); con.lineWidth=10; con.moveTo(0,200); con.lineTo(0,170); con.closePath(); con.stroke(); con.restore(); } for(var j=0;j<60;j++){ con.save(); con.translate(250,250); con.rotate(j*6*Math.PI/180); con.beginPath(); con.lineWidth=5; con.moveTo(0,200); con.lineTo(0,180); con.closePath(); con.stroke(); con.restore(); }*/ //获得时间 var tt = new Date(); var hour = tt.getHours(); var minu = tt.getMinutes(); var sec = tt.getSeconds(); hour = hour>12?hour-12:hour; //时针 con.save(); con.translate(250,250); con.beginPath(); con.lineWidth=10; h = hour+minu/60; con.rotate(h*30*Math.PI/180); con.moveTo(0,-130); con.lineTo(0,20); con.closePath(); con.stroke(); con.restore(); //分针 con.save(); con.translate(250,250); con.beginPath(); con.lineWidth=7; m = minu+sec/60; con.rotate(m*6*Math.PI/180); con.moveTo(0,-170); con.lineTo(0,20); con.closePath(); con.stroke(); con.restore(); //秒针 con.save(); con.translate(250,250); con.beginPath(); con.rotate(sec*6*Math.PI/180); con.moveTo(0,-210); con.lineTo(0,20); con.closePath(); con.stroke(); con.restore(); //小圆点填充 con.save(); con.translate(250,250); con.lineWidth=5; con.beginPath(); con.arc(0,0,5,0,360,false); con.closePath(); con.fillStyle="white"; con.fill(); con.stroke(); con.restore(); } clock(); setInterval("clock()",1000); </script> </body> </html>
