用canvas画一个简陋的时钟

样式可以自己根据需要调整，这只是一个样板
代码有些繁琐 不多介绍，主要是使用 context.save()和context.restore()两个方法

var Clock = function(){
        this.ctx = document.querySelector("canvas").getContext("2d");
        this.w = this.ctx.canvas.width;
        this.h = this.ctx.canvas.height;
        this.r = 200;
        this.mSpace = (2*this.r*Math.PI)/60 - 3;
        this.hSpace = (2*this.r*Math.PI)/12 - 3;
    }
    // 初始化
    Clock.prototype.init = function(){
        this.drawPan();
        this.drawHour();
        this.drawMinute();
        this.drawSeconds();
        this.drawPoint();
    }
    //画表盘
    Clock.prototype.drawPan = function (){
        var ctx = this.ctx;
        var w = this.w;
        var h = this.h;
        var r = this.r;
        var mSpace = this.mSpace;
        var hSpace = this.hSpace;
        ctx.save();
        ctx.beginPath();
        ctx.arc(w/2,h/2,r+2,0,2*Math.PI);
        ctx.fillStyle = "cyan";
        ctx.fill();
        //分
        ctx.beginPath();
        ctx.arc(w/2,h/2,r,0,2*Math.PI);
        ctx.setLineDash([3,mSpace]);
        ctx.strokeStyle = "green";
        ctx.lineWidth = 8;
        ctx.stroke();
        //时
        ctx.beginPath();
        ctx.arc(w/2,h/2,r,0,2*Math.PI);
        ctx.setLineDash([3,hSpace]);
        ctx.lineWidth = 15;
        ctx.stroke();
        //圈
        ctx.beginPath();
        ctx.arc(w/2,h/2,205,0,2*Math.PI);
        ctx.setLineDash([0]);
        ctx.lineWidth = 5;
        ctx.stroke();

        ctx.restore();
    }
    // 计算当前时间表针角度
    Clock.prototype.getAngle = function(){
        var date = new Date();
        var h = Math.abs(date.getHours()-12);
        var m = date.getMinutes();
        var s = date.getSeconds();
        // var hr = ((h/12)+((m *60+s)/3600)/12) * 2 * Math.PI;
        // var mr = ((m / 60) + (s / 3600)) * 2 * Math.PI - hr;
        // var sr = (s / 60) * 2 * Math.PI - mr;
        var hr = ((h/12)+((m *60+s)/3600)/12) * 2 * Math.PI;
        var mr = ((m / 60) + (s / 3600)) * 2 * Math.PI;
        var sr = (s / 60) * 2 * Math.PI;
        var obj = {
            hr:hr,
            mr:mr,
            sr:sr,
        }
        return obj;
    }
    // 时针
    Clock.prototype.drawHour = function () {
        var ctx = this.ctx;
        var w = this.w;
        var h = this.h;
        var angle = this.getAngle().hr;
        ctx.save();
        ctx.beginPath();
        ctx.translate(w/2,h/2);//位移的是画布的基点
        ctx.rotate(angle);
        ctx.moveTo(0,0);
        ctx.lineTo(0,-100);
        ctx.strokeStyle = "green";
        ctx.lineWidth = 3;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.restore();
    }
    // 分针
    Clock.prototype.drawMinute = function () {
        var ctx = this.ctx;
        var w = this.w;
        var h = this.h;
        var angle = this.getAngle().mr;
        ctx.save();
        ctx.beginPath();
        ctx.translate(w/2,h/2);//位移的是画布的基点
        ctx.rotate(angle);
        ctx.moveTo(0,0);
        ctx.lineTo(0,-130);
        ctx.strokeStyle = "green";
        ctx.lineWidth = 3;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.restore();
    }
    //秒针
    Clock.prototype.drawSeconds = function () {
        var ctx = this.ctx;
        var w = this.w;
        var h = this.h;
        var angle = this.getAngle().sr;
        ctx.save();
        ctx.beginPath();
        ctx.translate(w/2,h/2);//位移的是画布的基点
        ctx.rotate(angle);
        ctx.moveTo(0,0);
        ctx.lineTo(0,-160);
        ctx.strokeStyle = "green";
        ctx.lineWidth = 3;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.restore();
    }
    Clock.prototype.drawPoint = function(){
        var ctx = this.ctx;
        var w = this.w;
        var h = this.h;
        var angle = this.getAngle().sr;
        ctx.save();
        ctx.beginPath();
        ctx.translate(w/2,h/2);
        ctx.rotate(angle);
        ctx.arc(0,0,5,0,2*Math.PI);
        ctx.arc(0,-140,5,0,2*Math.PI);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.restore();
    }
    var clock = new Clock();
    clock.init();
    setInterval(function () {
        clock.init();
    },1000);