How to create dynamic Particle mesh Animation using HTML5 Canvas
Editor to share with you how to use HTML5 Canvas to create dynamic particle grid animation, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Add a canvas:
Here is the style:
# canvas {
Position: absolute
Display: block
Left:0
Top:0
Background: # 0f0f0f
Z-index:-1
}
The function of the z-index:-1 of canvas above is that it can be placed under some elements as a background.
To ensure that canvas can fill the entire browser, set the width and height of canvas to be the same as the browser:
Function getSize () {
W = canvas.width = window.innerWidth
H = canvas.height = window.innerHeight
}
The w and h above represent the width and height of the browser, respectively.
After obtaining the width and height of the browser, the next step is to draw particles inside. Here we need to define some parameters of the particles in advance:
Var opt = {
ParticleAmount: 50, / / number of particles
DefaultSpeed: 1, / / particle velocity
VariantSpeed: 1, / / variable of particle velocity
ParticleColor: "rgb (32245245)", / / Color of particles
LineColor: "rgb (32245245)", / / Color of grid connection
DefaultRadius: 2, / / Particle Radius
VariantRadius: 2, / / variable of particle radius
MinDistance: 200 / / minimum distance of connections between particles
}
The above velocity variables and radius variables are to ensure that the size and velocity of the particles are not exactly the same.
Then we create a class to initialize the particles. The code is long, and I have annotated it:
Function Partical () {
This.x = Math.random () * w; / / x-axis coordinates of the particle
This.y = Math.random () * h; / / the y-axis coordinate of the particle
This.speed = opt.defaultSpeed + opt.variantSpeed*Math.random (); / / the velocity of particles
This.directionAngle = Math.floor (Math.random () * 360); / / Direction of particle motion
This.color = opt.particleColor; / / Color of the particle
This.radius = opt.defaultRadius+Math.random () * opt.variantRadius; / / the radius of the particle
This.vector = {
X:this.speed * Math.cos (this.directionAngle), / / the velocity of the particles on the x-axis
Y:this.speed * Math.sin (this.directionAngle) / / the velocity of particles on the y-axis
}
This.update = function () {/ / update function of particles
This.border (); / / determine whether the particle has reached the boundary
This.x + = this.vector.x; / / coordinates of the particle on the x-axis at the next moment
This.y + = this.vector.y; / / coordinates of the particle on the y-axis at the next moment
}
This.border = function () {/ / determine whether the particles reach the boundary
If (this.x > = w | | this.x= h | | this.y w) {/ / the following is the operation of changing the size of the browser window. After changing the size of the window, some particles will be hidden so that they can be displayed.
This.x = w
}
If (this.y > h) {
This.y = h
}
If (this.x < 0) {
This.x = 0
}
If (this.y < 0) {
This.y = 0
}
}
This.draw = function () {/ / function to draw particles
Ctx.beginPath ()
Ctx.arc (this.x, this.y, this.radius, 0, Math.PI * 2)
Ctx.closePath ()
Ctx.fillStyle = this.color
Ctx.fill ()
}
}
These are all the contents of the article "how to create dynamic Particle mesh Animation with HTML5 Canvas". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
