JS實現(xiàn)煙花爆炸效果

更新時間：2020年03月10日 12:42:39 作者：柳時鎮(zhèn)大尉

這篇文章主要為大家詳細介紹了JS實現(xiàn)煙花爆炸效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)煙花爆炸的具體代碼，供大家參考，具體內(nèi)容如下

<!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;
  }
 }
 //創(chuàng)建小球
 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時鐘特效匯總

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: