怎么用html制作一个动态烟花
这篇文章主要介绍怎么用html制作一个动态烟花，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
十年的宝山网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整宝山建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“宝山网站设计”,“宝山网站推广”以来，每个客户项目都认真落实执行。
代码结构
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制作一个动态烟花”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
分享名称：怎么用html制作一个动态烟花
本文网址：http://6mz.cn/article/pioshg.html