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之ESC(第二类混淆)
May 06 Javascript
javascript数组使用调用方法汇总
Dec 08 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
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
php学习笔记之面向对象
2014/11/08 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
联想英国官网:Lenovo英国
2019/07/17 全球购物
中学老师的自我评价
2013/11/07 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
财务工作检讨书
2014/10/29 职场文书
2014年药房工作总结
2014/11/22 职场文书
大学毕业生个人总结
2015/02/28 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书