使用html5+canvas制作一个网页的时钟。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas clock _fonglezen的前端小站</title>
</head>
<body>
<canvas width="500" height="500" id="canvas">你的破浏览器不支持HTML5,赶紧卸载了吧!!下载最新的浏览器,拥有更好的上网体验!</canvas>
<script>
var can = document.getElementById('canvas');
var con = can.getContext('2d');
function drawclock(){
con.clearRect(0,0,500,500);
var now = new Date();
//add logo
con.save();
con.beginPath();
con.fillStyle = '#e5e5e5';
con.font = '40px 微软雅黑';
con.fillText('fonglezen',150,350,500);
con.closePath();
con.restore();
//draw circle clock
con.beginPath();
con.lineWidth = 10;
con.strokeStyle = '#666';
con.arc(250,250,200,0,360,false);
con.stroke();
con.closePath();
//draw second
for(var i = 0; i < 60 ; i++){
con.save();
con.beginPath();
con.translate(250,250);
con.rotate(i*6*Math.PI/180);
con.lineWidth = 5;
con.strokeStyle = '#ccc';
con.moveTo(0,-175);
con.lineTo(0,-190);
con.stroke();
con.closePath();
con.restore();
}
//draw quarter
for(var i = 0; i < 12; i++){
con.save();
con.beginPath();
con.translate(250,250);
con.rotate(i*30*Math.PI/180);
con.moveTo(0,-170);
con.lineTo(0,-190);
con.stroke();
con.closePath();
con.restore();
}
//draw hours zhen
var nowhours = now.getHours();
if(nowhours > 12){
nowhours = nowhours - 12;
}
con.save();
con.beginPath();
con.translate(250,250);
con.rotate(now.getHours()*30*Math.PI/180);
con.lineWidth = 8;
con.strokeStyle = '#000';
con.moveTo(0,20);
con.lineTo(0,-110);
con.stroke();
con.closePath();
con.restore();
//draw min zhen
con.save();
con.beginPath();
con.translate(250,250);
con.rotate(now.getMinutes()*6*Math.PI/180);
con.lineWidth = 8;
con.strokeStyle = '#000';
con.moveTo(0,20);
con.lineTo(0,-150);
con.stroke();
con.closePath();
con.restore();
//draw second zhen
con.save();
con.beginPath();
con.translate(250,250);
con.rotate(now.getSeconds()*6*Math.PI/180);
con.lineWidth = 2;
con.strokeStyle = '#f00';
con.moveTo(0,20);
con.lineTo(0,-180);
con.stroke();
con.closePath();
con.restore();
//center circle
con.save();
con.beginPath();
con.fillStyle = '#f00';
con.arc(250,250,7,0,360,false);
con.fill();
con.closePath();
con.restore();
}
drawclock();
setInterval(drawclock,1000);
</script>
</body>
</html>