H5 a detailed method for implementing particle clocks in canvas

This article gives you the content is about H5 canvas to implement the particle clock detailed method, there is a certain reference value, the need for friends can refer to, I hope to help you.

Let's look at the effect of the particle clock, as follows:

Below we will implement through canvas and JS,
First, create an HTML file and add a canvas canvas, as follows:

<! DOCTYPE html>
The following import footage, digit.js, footage in a two-dimensional array to spell a number, total: 0-9 and a colon, 10 characters, as follows:



You can see that 1 of the characters are made up
Start creating the canvas below:

function Clock () {        var canvas = document.getElementById ("canvas");        Canvas.width = +;        Canvas.height = +;        THIS.CXT = Canvas.getcontext (' 2d ');        This.cxt.fillstyle= "#ddd";        This.cxt.fillRect (0, 0, +);    }
The code above can be used to draw a small gray canvas in the browser.
Below we begin to analyze:
1. Understand the data matrix? is a multidimensional array
2. How do I draw a circle?
2.1 Do you know the radius first?


It is learned that the position of the center is:

R+1r+1 + (r+1) *2*1r+1 + (r+1) *2*2 ... R+1 + (r+1) *2*i
At the same time, the radius can be obtained by calculating the height of the circle as follows:
The height of a circle is (r+1) * *, the canvas height is made up of 10 circles

Canvasheight = (r+1) *2*10
If you set the canvas height to 100, then R will come out, and the center XY will come out and begin to draw a circle.
First, add a statement to the clock object above to calculate R

THIS.R = 100/20-1;
Now I'm adding the draw method to the clock's prototype.

Clock.prototype.draw = function (num, index) {        this.cxt.fillstyle= "#000";        for (let i=0; i<digit[num].length; i++) {to            (let j=0; j<digit[num][i].length; J + +) {                if (Digit[num][i][j] = = 1) {                    this.cxt.beginPath ();                    This.cxt.arc (index*70+ (this.r+1) + (this.r+1) *2*j, (this.r+1) + (this.r+1) *2*i, THIS.R, 0, math.pi*2, false);                    This.cxt.closePath ();                    This.cxt.fill ();}}}    
Draw receives 2 parameters, the first one is the character index, the second is the character offset order, and 70 is an offset distance, which can be customized.
The first for, the character array to be rendered, the second for, each row rendered and only rendered as 1, the circle parameter is mainly x,y,r

Here's the time, we can take the time directly from the new date, as follows:

Clock.prototype.getTime = function () {        var reg =/(\d) (\d):(\d) (\d):(\d) (\d)/.exec (New Date ());        var data = [];        Data.push (Reg[1], reg[2], ten, reg[3], reg[4], ten, reg[5], reg[6]);        for (var i=0; i<data.length; i++) {            This.draw (data[i], i);        }    }
The regular can be conveniently taken to the time and seconds, in the push array note the format corresponding, where 10 represents the 10th character in Digit.js, that is, the colon
Note that this painting will have a problem, that is, the canvas can not be refreshed, add this

canvas.height= 100
Below you can run the code, as follows:

var clock = new Clock (); SetInterval (() =>{        clock.gettime ();    })
Okay, so that's OK.