第一次学习如何使用canvas，感觉用起来还挺顺手，期间查了很多api，也参考了别人的例子，下面就是我成果，希望能帮助到路过的你：

'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();