How to use H5-canvas to realize Particle clock in web Front end

This article mainly explains the "web front end how to use H5-canvas to achieve the particle clock", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "web front end how to use H5-canvas to achieve particle clock" bar!

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

Next we will implement it through canvas and js

The first step is to create a html file and add a canvas canvas, as follows:

Document .container {margin: 0, auto; width: 600px;} web front-end development learning Q-q-u-n: 731771211, sharing learning methods and small details that need to be paid attention to, constantly updating the latest tutorials and learning methods (detailed front-end project practical teaching video, PDF)

The following import material, digit.js, material through a two-dimensional array into a number, a total of: 0-9 and colons, ten characters, as follows:

You can see that the characters with a value of 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,0500,100);}

The above code can draw a small gray canvas in the browser.

Let's start with the analysis:

1. Understand the data matrix? It's a multi-dimensional array.

two。 How to draw a circle?

2.1 you need to know the radius first?

As we can see from the above picture, the position of the center of the circle is as follows:

Rhombus 1 + (rhom1) * 2 rhom1 + (rham1) * 2. Rust 1 + (rust 1) * 2roomi

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 (ritual 1) * 2, and the height of the canvas is made up of 10 circles.

CanvasHeight = (rust 1) * 2x 10

If you set the height of the canvas to 100, r will come out, and the center xy will come out, and you will begin to draw a circle.

First add a statement to the above Clock object to calculate r

This.r = 100Accord 20-1

Now I'll add the draw method to the prototype of Clock.

Clock.prototype.draw = function (num, index) {this.cxt.fillStyle= "# 000000"; for (let item0; I