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

相关推荐: 微信小程序排行榜页面怎么实现

这篇文章主要讲解了“微信小程序排行榜页面怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序排行榜页面怎么实现”吧! 实现原理:利用背免费云主机域名景图片以及nth-child实现感谢各位的阅读,以…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/12 09:52
下一篇 01/12 09:53

相关推荐