Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.