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

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)

= 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.

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.