How to use canvas to achieve Particle clock effect in Html5
This article mainly introduces the Html5 how to use canvas to achieve particle clock effect related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe everyone in this Html5 how to use canvas to achieve particle clock effect article will have a harvest, let's take a look at it.
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;}
The following import material, digit.js, material through a two-dimensional array into a number, a total of: 0-9 and colons, ten characters
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:
R+1r+1 + (rust 1) * 2*1r+1 + (rust 1) * 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
