Canvas Draw Clock (object-oriented version)

Overview

More canvas instances can be seen on GitHub, with occasional updates: Https://github.com/xiangshuo1992/canvas-demo

After learning the teacher's course, I realized it again and wrote an object-oriented version.
Canvas clock effects-function programming
Canvas clock Effects-object-oriented version

The effect of this article can be seen directly codepen effect see the Pen <a href="https://codepen.io/xiangshuo1992/pen/qydnoj/" >clock</a> by Luke.deng (<a href="https://codepen.io/xiangshuo1992"> @xiangshuo1992 </a>) on <a href="https://codepen.io"> codepen</a>. & #10;

Html

<div>
    <canvas id= "Clock" ></canvas>
    <canvas id= "Clock2" ></canvas>
    < Canvas id= "Clock3" ></canvas>
</div>

Css

div {
  text-align:center;
  margin-top:250px;
}

JS Clock Object

/** * Clock Constructor (Class) * * @param string ID * @param object config */function Clock (ID, config) {This.canvas = Docu
    Ment.getelementbyid (ID);
    This.context = This.canvas.getContext (' 2d ');
    Default configuration parameter This.config = {};
This.init (config);

}; /** * Initialization Method * * @param object config */Clock.prototype.init = function (config) {//config parameter merge for (const attr I
    n config) {this.config[attr] = config[attr];
}//Clock goes up This.draw ();

};

/** * Picture Clock border */Clock.prototype.drawClockBorder = function () {};

/** * Write Clock number */Clock.prototype.drawNumber = function () {};

/** * Draw tick points */Clock.prototype.drawScale = function () {};

/** * Draw the hour */Clock.prototype.drawHour = function (hour, minute) {};

/** * Draw the minute hand * */Clock.prototype.drawMinute = function (minute) {};

/** * Draw seconds */Clock.prototype.drawSecond = function (second) {};

/** * Draw fixed point (screw) */Clock.prototype.drawDot = function () {}; /** * Time Goes up */Clock.prototype.draw = function () {Let ConteXT = This.context;
    Context.clearrect (0, 0, this.config.width, this.config.height);
    Let now = new Date ();
    Let hour = now.gethours ();
    Let minute = Now.getminutes ();

    Let second = Now.getseconds ();
    This.drawclockborder ();
    This.drawnumber ();
    This.drawscale ();
    This.drawhour (hour, minute);
    This.drawminute (minute);
    This.drawsecond (second);
    This.drawdot ();
    Context.restore ();
Bind this object with bind () setinterval (This.draw.bind (this), 1000); };

JS Application Instantiation Object

Instantiate a Clock object
//default configuration let
Clock = new clock (' clock ');

Detailed code we can see the source of the link above.

The realization principle of the time-out clock, the object-oriented writing has two points worth noting the key point one

Comb the configurable parameters and methods of the object, set the default configuration parameters, and then merge the user-configured parameters with the default parameters

for (const attr in config) {
     this.config[attr] = config[attr];
}

This is the way to copy objects, in JQ, is similar to the principle, of course, the specific process is more complex, adding more judgment.

$.extend (OBJ1,BOJ2);

Key point two

The this point problem occurs when the draw function is called in a loop, where the this point of the current function is changed by the bind () method.

SetInterval (This.draw.bind (this), 1000);

Other people directly read the source bar.

Source: web video tutorial-canvas drawing clocks