JS实现烟花爆炸效果


Posted in Javascript onMarch 10, 2020

本文实例为大家分享了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 解析读取XML文档 实例代码
Jul 07 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
JS实现打砖块游戏
Feb 14 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
JS Web Flex弹性盒子模型代码实例
Mar 10 #Javascript
JS实现网页烟花动画效果
Mar 10 #Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 #Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 #Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 #Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 #Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 #Javascript
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
深入理解PHP中的count函数
2016/05/31 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
VUE多层路由嵌套实现代码
2017/05/15 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
求职简历中的自我评价分享
2013/12/08 职场文书
临时租车协议范本
2014/09/23 职场文书
2014年统计工作总结
2014/11/21 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书