<!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>
