显示效果如下
源码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { width: 100%; height: 100%; overflow: hidden; background-color: gray; } #clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; } </style> </head> <body> <canvas id="clock" width="400" height="400"></canvas> <script> window.onload = function () { var canvas = document.querySelector("#clock"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); move(); setInterval(move, 1000); function move() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布 ctx.save(); // 初始化样式 ctx.translate(200, 200); ctx.rotate(-90 * Math.PI / 180); ctx.lineWidth = "8"; ctx.strokeStyle = "black"; ctx.lineCap = "round"; ctx.beginPath(); // 外层空心圆盘 ctx.save(); ctx.lineWidth = 14; ctx.strokeStyle = "#325FA2"; ctx.beginPath(); ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180); ctx.stroke(); ctx.restore(); // 时针刻度 ctx.save(); ctx.beginPath(); for (var i = 0; i < 12; i++) { ctx.rotate(30 * Math.PI / 180); ctx.moveTo(120, 0); ctx.lineTo(100, 0); } ctx.stroke(); ctx.restore(); // 分针刻度 ctx.save(); ctx.lineWidth = 3; ctx.beginPath(); for (var i = 0; i < 60; i++) { if (i % 5 != 0) { ctx.moveTo(120, 0); ctx.lineTo(117, 0); } ctx.rotate(6 * Math.PI / 180); } ctx.stroke(); ctx.restore(); // 时针、分针、秒针、钟座 var date = new Date(); var s = date.getSeconds(); var m = date.getMinutes() + s / 60; var h = date.getHours() + m / 60; h = h > 12 ? h - 12 : h; // 时针 ctx.save(); ctx.lineWidth = 14; ctx.rotate(h * 30 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(-20, 0); ctx.lineTo(80, 0); ctx.stroke(); ctx.restore(); //分针 ctx.save(); ctx.lineWidth = 10; ctx.rotate(m * 6 * Math.PI / 180);; ctx.beginPath(); ctx.moveTo(-28, 0); ctx.lineTo(112, 0); ctx.stroke(); ctx.restore(); // 秒针 ctx.save(); ctx.lineWidth = 6; ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; ctx.rotate(s * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(-30, 0); ctx.lineTo(83, 0); ctx.stroke(); // 中心实心圆盘 ctx.beginPath(); ctx.arc(0, 0, 10, 0, 360); ctx.fill(); // 秒针针头 ctx.beginPath(); ctx.arc(96, 0, 10, 0, 360); ctx.stroke(); ctx.restore(); ctx.restore(); } } } </script> </body> </html>