Let’s first look at the effect of the particle clock, as follows:
Below we will implement it through canvas and js,
First, create an html file and add a canvas, as follows:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title> <style> .container{ margin: 0, auto; width: 600px; } </style ></head><body> <div id=container> <canvas id=canvas></canvas> </div></body>Next, import the material, digit.js. The material is composed of numbers using two-dimensional arrays. There are a total of ten characters: 0-9 and colon, as follows:
You can see that the characters 1 are composed of
Let’s start creating the canvas:
function Clock() { var canvas = document.getElementById(canvas); canvas.width = 600; canvas.height = 100; this.cxt = canvas.getContext('2d'); this.cxt.fillStyle=#ddd; this .cxt.fillRect(0, 0, 500, 100); }The above code can draw a small gray canvas in the browser
Let’s start the analysis below:
1. Understand the data matrix? It's a multidimensional array
2. How to draw a circle?
2.1 Do you need to know the radius first?
As can be seen from the above figure, the positions of the center of the circle are:
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 also be obtained by calculating the height of the circle, as follows:
The height of a circle is (r+1)*2, and the height of the canvas is composed of 10 circles.
canvasHeight = (r+1)*2*10
If the canvas height is set to 100, then r will appear, the circle center xy will also appear, and the circle will start to be drawn.
First, add a statement to the Clock object above to calculate r
this.r = 100/20-1;
Next, I add the draw method to the Clock prototype.
Clock.prototype.draw = function(num, index) { this.cxt.fillStyle=#000; for (let i=0; i<digit[num].length; i++) { for (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 is the character index, the second is the character offset sequence, 70 is an offset distance, which can be customized.
The first for gets the character array to be rendered. The second for takes each line for rendering and only renders it as 1. The parameters for drawing a circle are mainly x, y, r.
Next, we need to get the time. We can directly get the time from new Date using regular rules, 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], 10, reg[3], reg[4], 10, reg[5], reg[6]); for (var i=0; i<data.length; i++) { this.draw(data[i], i); } }You can easily get the hours, minutes and seconds through regular expressions. When pushing the array, pay attention to the corresponding format. 10 represents the 10th character in digit.js, which is the colon.
Note that there will be a problem with painting like this, that is, the canvas cannot be refreshed. You can add this
canvas.height= 100
Now you can run the code, as follows:
var clock = new Clock();setInterval(()=>{ clock.getTime(); })Okay, this is ok
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.