用原生JS封装一个类，实现在HTML页面绘制时钟

用原生JS封装一个类，实现在HTML页面绘制时钟

本文基于ES 6进行编写，有学习JS，但是不了解ES 6的小伙伴可移步ES 6学习进行学习，还需要有canvas画布相关的知识

'use strict'


class Clock {

    constructor(options) {
        this.options = options
        /* 初始化 */

        this.init().run()
    }

    init() {
        const defaultOption = {
            containerCtx:'',
            SL:200,
            ML:150,
            HL:130,
            OriginR:2.5,
            OutBoxR:250,
            SDeg:6,
            MDeg:6,
            HDeg:30
        }
        /* 创建DOM */
        let timer = new Date().getTime();
        let ClockDOM = document.createElement('canvas');
        ClockDOM.style.position = 'absolute';
        ClockDOM.style.zIndex = '-999';
        ClockDOM.width = 1536;
        ClockDOM.height = 722;
        defaultOption.containerCtx = ClockDOM.getContext('2d');

        /* 填充黑色背景 */
        defaultOption.containerCtx.fillStyle = "black";
        defaultOption.containerCtx.fillRect(0,0,1536,722);
        defaultOption.containerCtx.translate(1536/2,722/2);
        defaultOption.containerCtx.save();   //保存一下默认状态
        document.getElementsByTagName('body')[0].appendChild(ClockDOM);

        for(const defaultKey in defaultOption) {
            if(defaultOption.hasOwnProperty(defaultKey) && !this.options.hasOwnProperty(defaultKey)) {
                this.options[defaultKey] = defaultOption[defaultKey];
            }
        }

        this.ClockCtx = this.options.containerCtx
        return this;
    }

    /* 运转时钟 */
    run() {
            this.ClockCtx.fillStyle = "black";
            this.ClockCtx.fillRect(-1536/2,-722/2,1536,722);
            let date = new Date();
            this.ClockCtx.font = "28px 微软雅黑";
            this.ClockCtx.fillStyle = "blue";
            this.ClockCtx.fillText("当前时间："+ date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(),-150,-300);
            this.nowS = date.getSeconds();
            this.nowM = date.getMinutes();
            this.nowH = date.getHours();
            this.drawOrigin().drawHMSN();   

        requestAnimationFrame(this.run.bind(this));
    }

    /* 绘制时分秒刻度 */
    drawHMSS() {
        
        /* 绘制秒刻度 */
        for(var i = 1;i < 60;i++) {
            if(i % 5 === 0) {
                this.ClockCtx.rotate(Math.PI / 180 * this.options.SDeg);
                continue;
            } else {
               this.ClockCtx.beginPath();
               this.ClockCtx.strokeStyle = "red";
               this.ClockCtx.lineWidth = 1;
               this.ClockCtx.rotate(Math.PI / 180 * this.options.SDeg);
               this.ClockCtx.moveTo(240,0);
               this.ClockCtx.lineTo(250,0);
               this.ClockCtx.stroke();
               this.ClockCtx.closePath();
            }
        }
        /* end 354度 */

        /* 绘制时刻度 */
        this.ClockCtx.rotate(Math.PI / 180 * this.options.SDeg);
        for(var i = 1;i <= 12;i++) {
            this.ClockCtx.beginPath();
            this.ClockCtx.strokeStyle = "blue";
            this.ClockCtx.lineWidth = 5;
            this.ClockCtx.rotate(Math.PI / 180 * this.options.HDeg);
            this.ClockCtx.moveTo(230,0);
            this.ClockCtx.lineTo(250,0);
            this.ClockCtx.stroke();
            this.ClockCtx.closePath();
        }
        /* end 360度 */
        this.drawNumber();
        
        return this;
    }

    /* 根据当前的时、分、秒绘制时针,分针,秒针 */
    drawHMSN() {
        /* 在这里我把默认状态记作0 */
       this.ClockCtx.restore();
       this.ClockCtx.save();       //压入状态0
       this.ClockCtx.rotate(Math.PI / 180 *(-90));
        /* 绘制秒针 */
        this.ClockCtx.beginPath();
        this.ClockCtx.strokeStyle = "red";
        this.ClockCtx.lineWidth = 1;
        this.ClockCtx.rotate(Math.PI/180 * (this.nowS * 6));        //根据当前的秒数,旋转相应的角度
        this.ClockCtx.moveTo(this.options.OriginR,0);
        this.ClockCtx.lineTo(this.options.OriginR + this.options.SL,0);
        this.ClockCtx.stroke();
        this.ClockCtx.closePath();

        this.ClockCtx.restore();    //回到状态0
        this.ClockCtx.save();       //再次压入状态0
        this.ClockCtx.rotate(Math.PI / 180 *(-90));
        /* 绘制分针 */
        this.ClockCtx.beginPath();
        this.ClockCtx.strokeStyle = "green";
        this.ClockCtx.lineWidth = 3;
        this.ClockCtx.rotate(Math.PI/180 * (this.options.nowM * 6));        //根据当前的秒数,旋转相应的角度
        this.ClockCtx.moveTo(this.options.OriginR,0);
        this.ClockCtx.lineTo(this.options.OriginR + this.options.ML,0);
        this.ClockCtx.stroke();
        this.ClockCtx.closePath();

        this.ClockCtx.restore();    //回到状态0
        this.ClockCtx.save();       //再次压入状态0
        this.ClockCtx.rotate(Math.PI / 180 *(-90));
        /* 绘制时针 */
        this.ClockCtx.beginPath();
        this.ClockCtx.strokeStyle = "blue";
        this.ClockCtx.lineWidth = 5;
        this.ClockCtx.rotate(Math.PI/180 * (this.nowH * 30));        //根据当前的秒数,旋转相应的角度
        this.ClockCtx.moveTo(this.options.OriginR,0);
        this.ClockCtx.lineTo(this.options.OriginR + this.options.HL,0);
        this.ClockCtx.stroke();
        this.ClockCtx.closePath();

        this.ClockCtx.restore();    //回到状态0
        this.ClockCtx.save();       //再次压入状态0
        return this;
    }

    /* 绘制钟的中心原点和钟的外边框 */
    drawOrigin() {
        this.ClockCtx.restore();    //回到默认状态
        /* 绘制中心圆 */
        this.ClockCtx.strokeStyle = "green";
        this.ClockCtx.beginPath();
        this.ClockCtx.lineWidth = 1;
        this.ClockCtx.arc(0,0,this.options.OriginR,0,(Math.PI / 180) * 360);
        this.ClockCtx.closePath();
        this.ClockCtx.stroke();

        /* 绘制外边框 */
        this.ClockCtx.beginPath();
        this.ClockCtx.arc(0,0,this.options.OutBoxR,0,(Math.PI / 180) * 360);
        this.ClockCtx.closePath();
        this.ClockCtx.stroke();

        // c.save();     //保存当前画笔的状态
        this.drawHMSS();
        return this;        
    }

    /* 绘制数字 */
    drawNumber() {
        this.ClockCtx.save();
        this.ClockCtx.rotate(Math.PI / 180 *(-90));
        /*绘制1 - 12*/
        for(var i = 1;i <= 5;i++) {
            this.ClockCtx.beginPath();
            this.ClockCtx.font = "28px 微软雅黑";
            this.ClockCtx.fillStyle = "blue";
            this.ClockCtx.rotate(Math.PI / 180 * 33);
            this.ClockCtx.fillText(''+i,190,0);
            this.ClockCtx.stroke();
            if( i == 3) {
                this.ClockCtx.fillText(''+(i+3),0,210);
                this.ClockCtx.rotate(Math.PI / 180 * (-6));
                this.ClockCtx.fillText(''+(i+6),-210,0);
                this.ClockCtx.rotate(Math.PI / 180 * 6);
                this.ClockCtx.rotate(Math.PI / 180 * (-7));
                this.ClockCtx.fillText(''+(i+9),0,-180);
                this.ClockCtx.rotate(Math.PI / 180 * 7);
            }
            if(i == 4) {
                this.ClockCtx.fillText(''+(i+3),0,210);
                this.ClockCtx.rotate(Math.PI / 180 * (-6));
                this.ClockCtx.fillText(''+(i+6),-210,0);
                this.ClockCtx.rotate(Math.PI / 180 * 6);
            }
            if(i == 5) {
                this.ClockCtx.fillText(''+(i+3),0,210);
                this.ClockCtx.rotate(Math.PI / 180 * (-6));
                this.ClockCtx.fillText(''+(i+6),-210,0);
                this.ClockCtx.rotate(Math.PI / 180 * 6);
            }
            this.ClockCtx.rotate(Math.PI / 180 * (-3));
            this.ClockCtx.closePath();
        }

        return this;
    }
}

var clock = new Clock({
});

在Chrome浏览器上的运行效果如下: