怎么用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()

　　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

　　if(this.speed

　　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制作一个动态烟花”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注云技术行业资讯频道！

相关推荐: nodejs中I/O的含义是什么

nodejsI/OnodejsI/O nodejsI/OI/OI/OWindows10nodejs 12.19.0Dell G3NginxNginxCWebNodeNginxJavaScriptUIJavaScriptUI100NodeJSI/ONodeJSW…