JS实现烟花爆炸效果

金晗日

2023-03-14

本文向大家介绍JS实现烟花爆炸效果，包括了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.PI*2);
   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精彩特效分享给大家：

Javascript菜单特效大全

javascript仿QQ特效汇总

JavaScript时钟特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

JS实现烟花爆炸效果

相关阅读

相关文章

相关问答

相关工具

相关文档