这是用HTML5的canvas制作的一个钟表，包含表盘、时针、分针、秒针及它们的运动；另外还添加了自动读时间的功能。```html:run<!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>```
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/10967141.html
时间： 2025-01-18 02:32:51