效果图：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas clock</title> </head> <body> <canvas id="clock" width="500" height="500">您的浏览器不支持canvas标签</canvas> <script type="text/javascript"> var canvas = document.getElementById('clock'); var clock = canvas.getContext('2d'); var r = canvas.width/2.5; //半径 function drowClock(){ //清除画布 clock.clearRect(0, 0, 800, 800); var now = new Date(); var secd = now.getSeconds(); var min = now.getMinutes(); var hour = now.getHours(); //小时必须获取浮点类型（小时+分数转化的小时） //时间格式19:23:30 //将24小时进制装换为12小时进制 hour = hour + (min / 60); hour = hour > 12 ? hour - 12 : hour; //外圈 clock.beginPath(); clock.lineWidth = 10; clock.strokeStyle = "#d9d9d9"; clock.arc(250, 250, 200, 0, 360, false); clock.stroke(); clock.closePath(); //刻度 //时刻度 for (var i = 0; i < 12; i++) { clock.save(); //设置时针的粗细 clock.lineWidth = 7; //设置时针的颜色 clock.strokeStyle = "#727272"; //先设置0,0点 clock.translate(250, 250); //再设置旋转角度 clock.rotate((i * 30) * Math.PI / 180);//角度*Math.PI/180=弧度 clock.beginPath(); clock.moveTo(0, -170); clock.lineTo(0, -190); clock.closePath(); clock.stroke(); clock.restore(); } //分刻度 for (var i = 0; i < 60; i++) { clock.save(); //设置时针的粗细 clock.lineWidth = 3; //设置时针的颜色 clock.strokeStyle = "#727272"; //先设置0,0点 clock.translate(250, 250); //再设置旋转角度 clock.rotate((i * 6) * Math.PI / 180);//角度*Math.PI/180=弧度 clock.beginPath(); clock.moveTo(0, -180); clock.lineTo(0, -190); clock.closePath(); clock.stroke(); clock.restore(); } //时针 clock.save(); clock.lineWidth = 7; clock.strokeStyle = "#727272"; clock.translate(250, 250); clock.rotate(hour * 30 * Math.PI / 180); clock.beginPath(); clock.moveTo(0, -140); clock.lineTo(0, 30); clock.stroke(); clock.closePath(); clock.restore(); // 文字 for(i = 0;i<12;i++){ angle = i * 30; // 转换为弧度制,Math.sin、Math.cos都接受弧度制单位 angle = angle*Math.PI/180;; font = (i + 3 > 12)?i+3-12 : i+3; fontX = 245+Math.round(Math.cos(angle)*(r-45)); fontY = 256+Math.round(Math.sin(angle)*(r-45)); clock.font = 'bold 16px 微软雅黑'; clock.fillText(font+'',fontX,fontY); } //分针 clock.save(); clock.lineWidth = 5; clock.strokeStyle = "#727272"; clock.translate(250, 250); clock.rotate(min * 6 * Math.PI / 180); clock.beginPath(); clock.moveTo(0, -160); clock.lineTo(0, 30); clock.stroke(); clock.closePath(); clock.restore(); //秒针 clock.save(); clock.lineWidth = 3; clock.strokeStyle = "#727272"; clock.translate(250, 250); clock.rotate(secd * 6 * Math.PI / 180); clock.beginPath(); clock.moveTo(0, -170); clock.lineTo(0, 30); clock.closePath(); clock.stroke(); //画交叉点 clock.beginPath(); clock.arc(0, 0, 5, 0, 360, false); clock.closePath(); clock.fillStyle = "#ebebeb"; clock.fill(); clock.stroke(); clock.beginPath(); clock.arc(0, -150, 5, 0, 360, false); clock.closePath(); clock.fillStyle = "gray"; clock.fill(); clock.stroke(); clock.restore(); window.requestAnimationFrame(drowClock); } //使用setInternal（代码，（毫秒）时间） 让时钟动起来 drowClock(); // setInterval(drowClock, 1000); </script> </body> </html>