这是用 html5 的 canvas 制作的一个钟表, 包含表盘, 时针, 分针, 秒针及它们的运动; 另外还添加了自动读时间的功能.
html 代码
- <!doctype html>
- <html>
- <head>
- <style>
- #clock{
- display:block;
- background:url("") no-repeat;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <canvas id="clock" width="500" height="500">
您的浏览器不支持 canvas 标签, 无法看到时钟
- </canvas>
- <script>
- var clock=document.getElementById('clock');
- var context=clock.getContext('2d');
- function drawClock() {
- context.clearRect(0, 0, 500, 500);
- function tow(n) {
- return n>= 0 && n <10 ? '0' + n : '' + n;
- }
- var now = new Date();
- var second = now.getSeconds();
- var minute = now.getMinutes();
- var hour = now.getHours();
- var date = now.getDate();
- var month = now.getMonth()+1;
- var year = now.getFullYear();
- hour = hour + minute / 60;
- var hour1=hour;
- hour = hour> 12 ? hour - 12 : hour;
- // 制作时钟外圈
- context.lineWidth = 10;
- context.beginPath();
- context.arc(250, 270, 200, 0, 360, false);
- context.stroke();
- context.closePath();
- // 小时刻度制作
- for (i = 0; i <12; i++) {
- context.save();
- context.lineWidth = 9;
- context.strokeStyle = "red";
- context.translate(250, 270);
- context.rotate(i * 30 * Math.PI / 180);
- context.beginPath();
- context.moveTo(0, -170);
- context.lineTo(0, -190);
- context.stroke();
- context.closePath();
- context.restore();
- }
- // 分钟刻度制作
- for ( i = 0; i < 60; i++) {
- context.save();
- context.lineWidth = 5;
- context.strokeStyle = "blue";
- context.translate(250, 270);
- context.rotate(i * 6 * Math.PI / 180);
- context.beginPath();
- context.moveTo(0, -180);
- context.lineTo(0, -190);
- context.stroke();
- context.closePath();
- context.restore();
- }
- // 钟面上表示小时的数字
- for (var i = 1; i < 13; i++) {
- context.save();
- var deg = i * Math.PI / 6;
- context.translate(250, 270);
- var x = Math.sin(deg);
- var y = -Math.cos(deg);
- context.fillStyle = "block";
- context.font = "25px 宋体";
- context.textAlign = "center";
- context.textBaseline = "middle";
- context.lineWidth=1;
- context.strokeStyle="white";
- context.beginPath();
- context.strokeText(i, x * 155, y * 155);
- context.closePath();
- context.restore();
- }
- // 时针制作
- context.save();
- context.lineWidth=7;
- context.strokeStyle="#000";
- context.translate(250,270);
- context.rotate(hour*30*Math.PI/180);
- context.beginPath();
- context.moveTo(0,-110);
- context.lineTo(0,10);
- context.stroke();
- context.closePath();
- context.restore();
- // 分针制作
- context.save();
- context.lineWidth=5;
- context.strokeStyle="#000";
- context.translate(250,270);
- context.rotate(minute*6*Math.PI/180);
- context.beginPath();
- context.moveTo(0,-135);
- context.lineTo(0,15);
- context.stroke();
- context.closePath();
- context.restore();
- // 秒针制作
- context.save();// 保存当前环境;
- // 以下是秒针的主体
- context.strokeStyle="red";
- context.lineWidth=3;
- context.translate(250,270);
- context.rotate(second*6*Math.PI/180);// 秒针旋转的速度
- context.beginPath();
- context.moveTo(0,-170);
- context.lineTo(0,20);
- context.stroke();
- context.closePath();
- // 以上是秒针的主体, 以下是时针, 分针, 秒针的交叉点
- context.beginPath();
- context.arc(0,0,5,0,360,false);
- context.closePath();
- context.fillStyle="gray";
- context.fill();
- context.stroke();
- // 以上是时针, 分针, 秒针的交叉点, 以下是秒针的顶端装饰.
- context.beginPath();
- context.arc(0,-150,5,0,360,false);
- context.closePath();
- context.fillStyle="gray";
- context.fill();
- context.stroke();
- context.restore();// 返回已保存过的环境.
- // 以下是文字报时;
- context.save();
- context.font="23px 楷体";
- context.lineWidth=1;
- context.strokeStyle="white";
- context.strokeText("现在是北京时间:"+tow(year)+"年"+tow(month)+"月"+tow(date)+"日"
- +tow(Math.floor(hour1))+"时"+tow(minute)+"分"+tow(second)+"秒",5,30);
- context.restore();
- }
- drawClock();
- setInterval(drawClock,1000);
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/40901/50500fc5bc995317c3722af05e57291c.html