怎么用html制作一個動態煙花

這篇文章主要介紹怎么用html制作一個動態煙花，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　代碼結構

　　1. HTML代碼

　　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(i--) {

　　fireworks.push(

　　new Firework(Math.random()*window.innerWidth, window.innerHeight*Math.random())

　　)

　　}

　　render()

　　function render() {

　　setTimeout(render, 1000/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(i--) 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 ['#6ae5ab','#88e3b2','#36b89b','#7bd7ec','#66cbe1'][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

　　}

以上是“怎么用html制作一個動態煙花”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！