How to make a dynamic fireworks with html
This article mainly introduces how to use html to make a dynamic fireworks, the article is very detailed, has a certain reference value, interested friends must finish!
Code structure
1. HTML code
Var ctx = document.querySelector ('canvas'). GetContext (' 2d')
Ctx.canvas.width = window.innerWidth
Ctx.canvas.height = window.innerHeight
Var sparks = []
Var fireworks = []
Var I = 20; while (iMurt -) {
Fireworks.push (
New Firework (Math.random () * window.innerWidth, window.innerHeight*Math.random ())
)
}
Render ()
Function render () {
SetTimeout (render, 1000 Universe 60)
Ctx.fillStyle = 'rgba (0,0,0,0.1)'
Ctx.fillRect (0,0, ctx.canvas.width, ctx.canvas.height)
For (var firework of fireworks) {
If (firework.dead) continue
Firework.move ()
Firework.draw ()
}
For (var spark of sparks) {
If (spark.dead) continue
Spark.move ()
Spark.draw ()
}
If (Math.random ()
< 0.05) { fireworks.push(new Firework()) } } function Spark(x, y, color) { this.x = x this.y = y this.dir = Math.random() * (Math.PI*2) this.dead = false this.color = color this.speed = Math.random() * 3 + 3; this.walker = new Walker({ radius: 20, speed: 0.25 }) this.gravity = 0.25 this.dur = this.speed / 0.1 this.move = function() { this.dur-- if(this.dur < 0) this.dead = true if(this.speed < 0) return if(this.speed >0) this.speed-= 0.1
Var walk = this.walker.step ()
This.x + = Math.cos (this.dir + walk) * this.speed
This.y + = Math.sin (this.dir + walk) * this.speed
This.y + = this.gravity
This.gravity + = 0.05
}
This.draw = function () {
DrawCircle (this.x, this.y, 3, this.color)
}
}
Function Firework (x, y) {
This.xmove = new Walker ({radius: 10, speed: 0.5})
This.x = x | | Math.random () * ctx.canvas.width
This.y = y | | ctx.canvas.height
This.height = Math.random () * ctx.canvas.height/2
This.dead = false
This.color = randomColor ()
This.move = function () {
This.x + = this.xmove.step ()
If (this.y > this.height) this.y-= 1
Else this.burst ()
}
This.draw = function () {
DrawCircle (this.x, this.y, 1, this.color)
}
This.burst = function () {
This.dead = true
Var I = 100; while (iMurt -) sparks.push (new Spark (this.x, this.y, this.color))
}
}
Function drawCircle (x, y, radius, color) {
Color = color | |'# FFF'
Ctx.fillStyle = color
Ctx.fillRect (x-radius/2, y-radius/2, radius, radius)
}
Function randomColor () {
Return ['# 6ae5abe1'] [Math.floor (Math.random () * 5)]
}
Function Walker (options) {
This.step = function () {
This.direction = Math.sign (this.target) * this.speed
This.value + = this.direction
This.target
? This.target-= this.direction
: (this.value)
? (this.wander)
? This.target = this.newTarget ()
: this.target =-this.value
: this.target = this.newTarget ()
Return this.direction
}
This.newTarget = function () {
Return Math.round (Math.random () * (this.radius*2)-this.radius)
}
This.start = 0
This.value = 0
This.radius = options.radius
This.target = this.newTarget ()
This.direction = Math.sign (this.target)
This.wander = options.wander
This.speed = options.speed | | 1
}
The above is all the contents of the article "how to make a dynamic fireworks with html". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
