效果如下图所示：
实现代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>时钟</title> <style type="text/css"> div{ width: 500px; height: 500px; background-image: url(d_6.jpg); margin: 0 auto; border: 15px solid skyblue; } </style> </head> <body> <div> <canvas id="mycanvas" width="500px" height="500px"></canvas> </div> <script type="text/javascript"> //通过获取画布ID来获取画布对象 var canvas = document.getElementById('mycanvas'); //获取画布上下文对象context var cxt = canvas.getContext("2d"); //定义一个时钟方法 function drawClock(){ //每次清空画布的布局，使得时针旋转的足迹被清空，仅留下当前运动轨迹 cxt.clearRect(0,0,canvas.width,canvas.height); //定义时钟外圆边框 cxt.strokeStyle="pink"; //设置外圆边框颜色 cxt.lineWidth = 10; //设置外圆边框粗细 cxt.beginPath(); //开始绘制函数 cxt.arc(250,250,200,0*Math.PI/180,360*Math.PI/180,true); //绘制图形（0~360度） cxt.stroke(); //绘制空心圆函数 cxt.closePath(); //结束绘制函数 cxt.clip(); //裁剪圆形 //循环绘制12根时针刻度线 for(var i=0;i<12;i++){ cxt.save(); //保存当前状态，每次循环绘制的线均保存 cxt.lineWidth = 7; //设置时针刻度线的宽度 cxt.strokeStyle="red"; //设置时针刻度线的颜色 cxt.translate(250,250); //设置原点 cxt.rotate(30*i*Math.PI/180); //时针每小时转30度 cxt.beginPath(); cxt.moveTo(0,-175); //时针刻度线的起始点 cxt.lineTo(0,-195); //时针刻度线的经过点 cxt.stroke(); cxt.closePath(); cxt.restore(); //把原始状态恢复回来，保证每次循环起始位置是一致的，确保旋转后不会出错 } //循环绘制60根分针刻度线 for(var i=0;i<60;i++){ cxt.save(); cxt.lineWidth = 3; cxt.strokeStyle="red"; cxt.translate(250,250); cxt.rotate(6*i*Math.PI/180); //时针每小分钟转6度 cxt.beginPath(); cxt.moveTo(0,-185); cxt.lineTo(0,-195); cxt.stroke(); cxt.closePath(); cxt.restore(); } //获取系统时间 var now = new Date(); //获取时间对象 var sec = now.getSeconds(); //获取当前秒数 var min = now.getMinutes(); //获取当前分钟数 var hour = now.getHours(); //获取当前小时数 hour>12?hour-12:hour; //判断小时是否大于12小时，如果大于12小时，就执行hour-12，否则执行hour hour+=(min/60); //非整点时时针显示根据分针计算 // //绘制时针 cxt.save(); cxt.lineWidth = 7; cxt.strokeStyle="red"; cxt.translate(250,250); cxt.rotate(hour*30*Math.PI/180); //每小时旋转30度 cxt.beginPath(); cxt.moveTo(-0,-80); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); cxt.restore(); //绘制分针 cxt.save(); cxt.lineWidth = 5; cxt.strokeStyle="pink"; cxt.translate(250,250); cxt.rotate(min*6*Math.PI/180); //每分钟旋转6度 cxt.beginPath(); cxt.moveTo(0,-110); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); cxt.restore(); //绘制秒针 cxt.save(); cxt.lineWidth = 5; cxt.strokeStyle="#000"; cxt.translate(250,250); cxt.rotate(sec*6*Math.PI/180); //每分钟旋转6度 cxt.beginPath(); cxt.moveTo(0,-130); cxt.lineTo(0,10); cxt.stroke(); cxt.closePath(); cxt.restore(); } //调用时钟方法 drawClock(); //每秒调用一次时钟方法 setInterval(drawClock,1000); </script> </body> </html>