主页 / 网络编程 /

JS实现烟花爆炸效果

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了JS实现烟花爆炸效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现烟花爆炸的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
   {
   margin: 0;
   padding: 0;
  }
  html, body {
   width: 100%;
   height: 100%;
   background-color: black;
   overflow: hidden;
  }
 </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
 var canvas = document.getElementById("canvas");
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 var content2d = canvas.getContext("2d");
 var balls = []; //存储对象
 //小球的基本属性
 function ball() {
  this.x = null;
  this.y = null;
  this.angle = null;
  this.vx=null;
  this.vy=null;
  this.r = null;
  this.color = null;
  this.init = function (x, y) {
   //初始化属性值
   this.x = x;
   this.y = y;
   //随机角度
   this.angle = Math.random()  Math.PI  2;
   //随机小球的大小
   this.r = this.randomNum(10,25);
   this.vx=(this.randomNum(6,12)+Math.random()0.5)Math.cos(this.angle);
   this.vy=(this.randomNum(6,12)+Math.random()0.5)Math.sin(this.angle);
   this.color = this.randomColor();
  };
  //随机小球颜色
  this.randomColor = function () {
   return "#" + parseInt(Math.random()  16777216).toString(16);
  };
  //随机大小
  this.randomNum = function (min, max) {
   return Math.random()  max + min;
  };
  //重绘时需移动
  this.move=function(){
   this.x+=this.vx;
   this.y+=this.vy;
   this.r-=0.3;
   this.vx=0.93;
   this.vy=0.93;
  }
 }
 //创建小球
 function createBall(x, y) {
  var count = parseInt(Math.random()  30 + 10);
  for (var i = 0; i < count; i++) {
   var b = new ball();
   b.init(x, y);
   balls.push(b);
  }
 }
 //画小球
 function Draw(){
  for(var i=0;i<balls.length;i++){
   var circle=balls[i];
   circle.move();
   content2d.beginPath();
   content2d.fillStyle=circle.color;
   content2d.arc(circle.x,circle.y,circle.r,0,Math.PI2);
   content2d.fill();
   content2d.closePath();
  }
 }
 //移除小球
 function removeBall(){
  for(var i=0;i<balls.length;i++){
   var circle=balls[i];
   if(circle.r<0.3){
    balls.splice(i,1);
    i--;
   }
  }
 }
 //计时器，即重绘
 loop();
 function loop(){
  //清除整个canvas
  content2d.clearRect(0,0,canvas.width,canvas.height);
  Draw();
  removeBall();
  window.requestAnimationFrame(loop);
 }
 canvas.onmouseup = function (e) {
  var x = e.pageX;
  var y = e.pageY;
  createBall(x, y);
 }
</script>
</body>
</html>

更多JavaScript精彩特效分享给大家

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：JS实现放烟花效果 下一篇：JS Web Flex弹性盒子模型代码实例

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by