How to realize the animation of super cool fireworks with Canvas in HTML5
This article mainly introduces the HTML5 how to use Canvas to achieve super cool fireworks blooming animation related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this HTML5 how to use Canvas to achieve super cool fireworks blooming animation article will have a harvest, let's take a look.
HTML Code:
XML/HTML Code copies content to the clipboard
The structure of HTML is very simple, that is, a canvas container is constructed, and we will use JS to generate a Canvas object in this container. Look at the last JS code and you will know.
CSS Code:
CSS Code copies content to the clipboard
# canvas-container {background: # 000 url (bg.jpg); height: 400px; left: 50%; margin:-200px 00-300px; position: absolute; top: 50%; width: 600px; z-index: 2
} canvas {cursor: crosshair; display: block; position: relative; z-index: 3
} canvas:active {cursor: crosshair
} # skyline {background: url (skyline.png) repeat-x 50%; bottombottom: 0; height: 135px; left: 0; position: absolute; width: 100%; z-index: 1
} # mountains1 {background: url (mountains1.png) repeat-x 40%; bottombottom: 0; height: 200px; left: 0; position: absolute; width: 100%; z-index: 1
} # mountains2 {background: url (mountains2.png) repeat-x 30%; bottombottom: 0; height: 250px; left: 0; position: absolute; width: 100%; z-index: 1
} # gui {rightright: 0; position: fixed; top: 0; z-index: 3
}
The CSS code is nothing special, mainly defining background colors and borders and so on.
Next comes the most important Javascript code.
Javascript Code:
JavaScript Code copies content to the clipboard
Self.init = function () {
Self.dt = 0
Self.oldTime = Date.now ()
Self.canvas = document.createElement ('canvas')
Self.canvasContainer = $('# canvas-container'); var canvasContainerDisabled = document.getElementById ('canvas-container')
Self.canvas.onselectstart = function () {return false
}
Self.canvas.width = self.cw = 600,
Self.canvas.height = self.ch = 400
Self.particles = []
Self.partCount = 30
Self.fireworks = []
Self.mx = self.cw/2
Self.my = self.ch/2
Self.currentHue = 170
Self.partSpeed = 5
Self.partSpeedVariance = 10
Self.partWind = 50
Self.partFriction = 5
Self.partGravity = 1
Self.hueMin = 150
Self.hueMax = 200
Self.fworkSpeed = 2
Self.fworkAccel = 4
Self.hueVariance = 30
Self.flickerDensity = 20
Self.showShockwave = false
Self.showTarget = true
Self.clearAlpha = 25
Self.canvasContainer.append (self.canvas)
Self.ctx = self.canvas.getContext ('2d')
Self.ctx.lineCap = 'round'
Self.ctx.lineJoin = 'round'
Self.lineWidth = 1
Self.bindEvents ()
Self.canvasLoop ()
Self.canvas.onselectstart = function () {return false
}
}
The main purpose of this JS code is to construct a Canvas object into the canvas container and initialize the appearance and animation properties of the canvas object.
JavaScript Code copies content to the clipboard
Var Particle = function (x, y, hue) {this.x = x; this.y = y; this.coordLast = [
{x: x, y: y}
{x: x, y: y}
{x: x, y: y}
]; this.angle = rand (0360); this.speed = rand (self.partSpeed-self.partSpeedVariance) 0) {var inverseDensity = 50-self.flickerDensity; if (rand (0, inverseDensity) = inverseDensity) {
Self.ctx.beginPath ()
Self.ctx.arc (Math.round (this.x), Math.round (this.y), rand (this.lineWidth,this.lineWidth+3) / 2,0, Math.PI*2, false) self.ctx.closePath (); var randAlpha = rand (50100)
Self.ctx.fillStyle = 'hsla (' + this.hue+', 100%,'+ this.brightness+'%,'+ randAlpha+')'
Self.ctx.fill ()
}
}
}
The function of this JS code is to realize the drawing of small particles after fireworks explosion. it can be seen from the draw method that fireworks particles can be scattered in this range of random points by creating several random points.
JavaScript Code copies content to the clipboard
Var Firework = function (startX, startY, targetX, targetY) {this.x = startX; this.y = startY; this.startX = startX; this.startY = startY; this.hitX = false; this.hitY = false; this.coordLast = [
{x: startX, y: startY}
{x: startX, y: startY}
{x: startX, y: startY}
]; this.targetX = targetX; this.targetY = targetY; this.speed = self.fworkSpeed; this.angle = Math.atan2 (targetY-startY, targetX-startX); this.shockwaveAngle = Math.atan2 (targetY-startY, targetX-startX) + (90* (Math.PI/180)); this.acceleration = self.fworkAccel/100; this.hue = self.currentHue; this.brightness = rand (50,80); this.alpha = rand (50100) / 100; this.lineWidth = self.lineWidth; this.targetRadius = 1
}
Firework.prototype.update = function (index) {
Self.ctx.lineWidth = this.lineWidth
Vx = Math.cos (this.angle) * this.speed
Vy = Math.sin (this.angle) * this.speed; this.speed * = 1 + this.acceleration; this.coordLast [2] .x = this.coordLast [1] .x; this.coordLast [2] .y = this.coordLast [1] .y; this.coordLast [1] .x = this.coordLast [0] .x; this.coordLast [1] .y = this.coordLast [0] .y; this.coordLast [0] .x = this.x; this.coordLast [0] .y = this.y If (self.showTarget) {if (this.targetRadius)
< 8){ this.targetRadius += .25 * self.dt; } else { this.targetRadius = 1 * self.dt; } } if(this.startX >= this.targetX) {if (this.x + vx = this.targetX) {this.x = this.targetX; this.hitX = true
} else {this.x + = vx * self.dt
}
} if (this.startY > = this.targetY) {if (this.y + vy = this.targetY) {this.y = this.targetY; this.hitY = true
} else {this.y + = vy * self.dt
}
} if (this.hitX & & this.hitY) {var randExplosion = rand (0,9)
Self.createParticles (this.targetX, this.targetY, this.hue)
Self.fireworks.splice (index, 1)
}
}
Firework.prototype.draw = function () {
Self.ctx.lineWidth = this.lineWidth; var coordRand = (rand (1pm 3)-1)
Self.ctx.beginPath ()
Self.ctx.moveTo (Math.round (this.coordLast [coordRand] .x), Math.round (this.coordLast [coordRand] .y))
Self.ctx.lineTo (Math.round (this.x), Math.round (this.y))
Self.ctx.closePath ()
Self.ctx.strokeStyle = 'hsla (' + this.hue+', 100%,'+ this.brightness+'%,'+ this.alpha+')'
Self.ctx.stroke (); if (self.showTarget) {
Self.ctx.save ()
Self.ctx.beginPath ()
Self.ctx.arc (Math.round (this.targetX), Math.round (this.targetY), this.targetRadius, 0, Math.PI*2, false)
Self.ctx.closePath ()
Self.ctx.lineWidth = 1
Self.ctx.stroke ()
Self.ctx.restore ()
} if (self.showShockwave) {
Self.ctx.save ()
Self.ctx.translate (Math.round (this.x), Math.round (this.y))
Self.ctx.rotate (this.shockwaveAngle)
Self.ctx.beginPath ()
Self.ctx.arc (0,0,1 * (this.speed/5), 0, Math.PI, true)
Self.ctx.strokeStyle = 'hsla (' + this.hue+', 100%,'+ this.brightness+'%,'+ rand (25,60) / 100 percent)'
Self.ctx.lineWidth = this.lineWidth
Self.ctx.stroke ()
Self.ctx.restore ()
}
}
This JS code creates an instance of fireworks, and we can also see from the draw method that when we click on a point on the canvas, the fireworks are fired at that point.
This is the end of the article on "how to use Canvas to achieve super cool fireworks animation in HTML5". Thank you for reading! I believe that everyone has a certain understanding of "how to use Canvas to achieve super cool fireworks animation in HTML5". If you want to learn more, you are welcome to follow the industry information channel.
