一个简单的html5 canvas时钟例子

'use strict';

var clock = {
 init: function(){
     var _this = this;
     _this.load();
     setInterval(function(){
         _this.load();
     },1000)
 },

 load: function(){
     var date         = new Date();
         this.hours   = date.getHours(),
         this.minutes = date.getMinutes(),
         this.seconds = date.getSeconds(),
         this.deg     = Math.PI / 180;
         this.canvas  = document.getElementById('canvas'),
         this.ctx     = this.canvas.getContext('2d'),
         this.width   = this.canvas.height = 400,
         this.height  = this.canvas.width  = 400;

     this.ctx.translate(this.width/2, this.height/2); //居中处理
            this.ctx.save(); //防止跟别的应用公用一个画布时冲突

     this.hour();   //处理小时
     this.minute(); //处理分钟
     this.second(); //处理分钟
     this.number(); //绘出数字
     this.dotted(); //绘出点

     this.ctx.restore(); //防止跟别的应用公用一个画布时冲突
 },

 hour: function(){
     var ctx = this.ctx,
         h   = (this.hours * 5 + this.minutes / 12) * 6 *this.deg;

     ctx.save();              //保存当前环境的状态,防止冲突
     ctx.beginPath();         //起始一条路径
     ctx.rotate(h);           //按小时旋转当前绘图
     ctx.moveTo(4, 10);
     ctx.lineTo(0, -80);
     ctx.lineTo(-4, 10);
     ctx.fillStyle = '#000';
     ctx.fill();
     ctx.closePath();        //清除一条路径
     ctx.restore();          //返回之前保存过的路径状态和属性
 },

 minute: function(){
     var ctx = this.ctx,
         m   = (this.minutes + this.seconds / 60) * 6 * this.deg;

     ctx.save();
     ctx.beginPath();
     ctx.rotate(m);
     ctx.moveTo(3, 10);
     ctx.lineTo(0, -120);
     ctx.lineTo(-3, 10);
     ctx.fillStyle = '#000';
     ctx.fill();
     ctx.closePath();
     ctx.restore();
 },

 second: function(){
     var ctx = this.ctx,
         s   = this.seconds * 6 * this.deg;

     ctx.save();
     ctx.beginPath();
     ctx.rotate(s);
     ctx.moveTo(2, 10);
     ctx.lineTo(0, -150);
     ctx.lineTo(-2, 10);
     ctx.fillStyle = '#444';
     ctx.fill();
     ctx.closePath();
            ctx.restore();
 },

 number: function(){
     var ctx = this.ctx,
         deg = Math.PI / 180,
         i   = 1;

     ctx.save();
     ctx.font = '20px Arial';
     ctx.fillStyle = '#000';
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
     for(; i <= 12; i++) {
         var s = deg * i * 30,
                    x = Math.sin(s)*150,
                    y = -Math.cos(s)*150;
                ctx.fillText(i, x, y);
     }
     ctx.restore();
 },

 dotted: function(){
     var ctx = this.ctx,
         deg = Math.PI / 180,
         i   = 1;

     ctx.save();
     ctx.font = '20px Arial';
     ctx.fillStyle = '#000';
     ctx.textAlign = 'center';
     for(; i <= 60; i++) {
         var s = deg * i * 6,
             x = Math.sin(s)*150,
             y = -Math.cos(s)*150;
                if( i%5 !== 0 ){
             ctx.fillText('.', x, y);
                }
            }
            ctx.restore();
        }
}.init();