1 var dom = document.getElementById(‘clock‘);
  2 var ctx = dom.getContext(‘2d‘);
  3 var width = ctx.canvas.width;
  4 var height = ctx.canvas.height;
  5 var r = width / 2;
  6 //定义钟盘
  7 function drawBackground(){
  8     ctx.save();
  9     ctx.translate(r, r);
 10     ctx.beginPath();
 11     ctx.lineWidth = 10;
 12     ctx.font =‘18px Arial‘;
 13     ctx.textAlign = ‘center‘
 14     ctx.textBaseline = ‘middle‘
 15     ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);
 16     ctx.stroke();
 17     var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
 18     //遍历获取坐标
 19     hourNumbers.forEach(function(number, i){
 20         var rad = 2 * Math.PI / 12 * i;
 21         var x = Math.cos(rad) * (r - 30);
 22         var y = Math.sin(rad) * (r - 30);
 23         ctx.fillText(number, x ,y);
 24     })
 25  
 26     //定义刻度
 27     for(var i=0;i<60;i++){
 28         var rad = 2 * Math.PI / 60 * i;
 29         var x = Math.cos(rad) * (r - 18);
 30         var y = Math.sin(rad) * (r - 18);
 31         ctx.beginPath();
 32         if(i % 5 == 0){
 33             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
 34             ctx.fillStyle = ‘#000‘;
 35         }else{
 36             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
 37             ctx.fillStyle = ‘#ccc‘;
 38         }
 39         ctx.fill();
 40     }
 41  
 42 }
 43  
 44 //定义时钟
 45 function drawHour(hour,minute){
 46     ctx.save();
 47     ctx.beginPath();
 48     var rad = 2 * Math.PI / 12 * hour;
 49     var mrad = 2 * Math.PI / 12 / 60 * minute;
 50     ctx.rotate(rad + mrad);
 51     ctx.lineWidth = 6;
 52     ctx.lineCap= ‘round‘;
 53     ctx.moveTo(0 ,10);
 54     ctx.lineTo(0 ,-r / 2);
 55     ctx.stroke();
 56     ctx.restore();
 57 }
 58 //定义分钟
 59 function drawMinute(minute,second){
 60     ctx.save();
 61     ctx.beginPath();
 62     var rad = 2 * Math.PI / 60 * minute;
 63     var srad = 2 * Math.PI / 60 /60 * second;
 64     ctx.rotate(rad + srad);
 65     ctx.lineWidth = 3;
 66     ctx.lineCap= ‘round‘;
 67     ctx.moveTo(0 ,10);
 68     ctx.lineTo(0 ,-r + 18);
 69     ctx.stroke();
 70     ctx.restore();
 71 }
 72 //定义秒钟
 73 function drawSecond(second){
 74     ctx.save();
 75     ctx.beginPath();
 76     var rad = 2 * Math.PI / 60 * second;
 77     ctx.rotate(rad);
 78     ctx.lineWidth = 3;
 79     ctx.lineCap= ‘round‘;
 80     ctx.moveTo(-2 ,20);
 81     ctx.lineTo( 2, 20);
 82     ctx.lineTo( 1, -r + 18);
 83     ctx.lineTo( -1, -r + 18);
 84     ctx.fillStyle = ‘#c14543‘;
 85     ctx.fill();
 86     ctx.restore();
 87 }
 88 //定义钟盘圆点样式
 89 function drawDot(){
 90     ctx.beginPath();
 91     ctx.fillStyle = ‘#fff‘;
 92     ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
 93     ctx.fill();
 94 }
 95  
 96 //时间函数
 97 function draw(){
 98     ctx.clearRect(0, 0, width, height);
 99     var now = new Date();
100     var hour = now.getHours();
101     var minute = now.getMinutes();
102     var second = now.getSeconds();
103     drawBackground();
104     drawHour(hour,minute);
105     drawMinute(minute,second);
106     drawSecond(second);
107     drawDot();
108     ctx.restore();
109 }
110 setInterval(draw, 1000)

  1 <div class="clockdiv"><canvas id="clock" width ="200px" height="200px">您的浏览器不兼容canvas</canvas><div>
  2 <script type="text/javascript" src="http://files.cnblogs.com/files/mehome/clock.js"></script>