<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简单 样式模版--> <style type="text/css"> * { margin: 0; padding: 0; font-family: YaHei Consolas Hybrid,宋体; font-size: 14px; list-style: none; } .wrapper { margin: 50px auto; width: 400px; padding: 10px; border: solid 1px gray; background-color: #eee; overflow:auto; }/*H1浅蓝阴刻字*/ body { background-color: gray; } h1 { text-align: center; display: block; background-color: #C4DEF7; color: #344251; font: normal 30px "微软雅黑"; text-shadow: 1px 1px 0px #DEF3FF; padding: 5px 0px; margin:10px; box-shadow: 0px 2px 6px #000; border-radius:10px; } input[type='button'],input[type='submit'] { padding:2px 5px;} #clockMap { background-color:White;} </style> </head> <body> <h1> Canvas 之 时钟 Demo </h1> <div class="wrapper"> <canvas width="400" height="400" id="clockMap"></canvas> <script type="text/javascript"> //获取画面DOM对象 var canvas = document.getElementById("clockMap"); //获取2D画布的上下文 var map = canvas.getContext("2d"); //格式化时间格式为00:00:00来显示 var formatTime = function (time) { return time < 10 ? "0" + time : time; } //注意：在画时分秒的针时，一定要先保存环境，画完再回到环境中，不能一次画三针 var drawClock = function () { //清屏 map.clearRect(0, 0, 400, 400); //保存当前环境 map.save(); //绘制表盘 map.beginPath(); map.lineWidth = 10; map.storkeStyle = "black"; map.arc(200, 200, 150, 0, 360, true); map.stroke(); map.closePath(); //绘制刻度 map.translate(200, 200); for (var i = 0; i < 60; i++) { if (i % 5 == 0) { map.beginPath(); map.lineWidth = 4; map.strokeStyle = "red"; map.moveTo(135, 0); map.lineTo(143, 0); map.stroke(); map.closePath(); } else { map.beginPath(); map.lineWidth = 2; map.strokeStyle = "black"; map.moveTo(140, 0); map.lineTo(143, 0); map.stroke(); map.closePath(); } map.rotate(6 * Math.PI / 180); } //绘制数字 map.textAlign = "center"; map.textBaseline = "middle"; map.font = "bold 30px Arial"; map.fillText("3", 115, 0); map.fillText("6", 0, 115); map.fillText("9", -115, 0); map.fillText("12", 0, -115); //========绘制时针，分针，秒针======== //获取当前时间 var date = new Date(); var hours = date.getHours(); var minute = date.getMinutes(); var seconds = date.getSeconds(); hours = hours > 12 ? hours - 12 : hours; var hour = hours + minute / 60; //绘制时针 map.save(); map.beginPath(); map.rotate((hour * 30 - 90) * Math.PI / 180); map.lineWidth = 6; map.moveTo(-10, 0); map.lineTo(90, 0); map.closePath(); map.stroke(); map.restore(); //绘制分针 map.save(); map.beginPath(); map.rotate((minute * 6 - 90) * Math.PI / 180); map.lineWidth = 4; map.moveTo(-10, 0); map.lineTo(132, 0); map.closePath(); map.stroke(); map.restore(); //绘制秒针 map.save(); map.beginPath(); map.rotate((seconds * 6 - 90) * Math.PI / 180); map.lineWidth = 2; map.strokeStyle = "red"; map.moveTo(-10, 0); map.lineTo(138, 0); map.closePath(); map.stroke(); map.restore(); //中心点 map.save(); map.beginPath(); map.arc(0, 0, 4, 0, 360, true); map.closePath(); map.lineWidth = 2; map.strokeStyle = "red"; map.fill(); map.stroke(); map.restore(); //时间显示 map.save(); map.font = "24px Arial"; map.fillText("当前时间："+formatTime(hours) + ":" + formatTime(minute) + ":" + formatTime(seconds), -1, -180); map.restore(); //将画好的时钟显示在之前保存的环境中 map.restore(); } //加载时，执行一次，避免刷新时，有一秒的延迟 drawClock(); //开启定时器 window.setInterval(drawClock, 1000); </script> </div> </body> </html>
效果图：
