javascript--烟火效果

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width"/>

<title>烟花</title>

<style type="text/css">

  body{

    background-color: black;

    margin: 0;

  }

  #canvas{

    cursor: pointer;

  }

</style>

</head>

<body>

  <canvas id="canvas"></canvas>

  <script type="text/javascript">

    window.requestAnimFrame = (function () {

      return window.requestAnimFrame ||

             window.webkitRequestAnimationFrame ||

             window.mozRequestAnimationFrame ||

             window.oRequestAnimationFrame ||

             window.msRequestAnimationFrame ||

             function(callback){

                window.setTimeout(callback,1000 / 60);

             };

    })();

    Function.prototype.extend = function (oContext, bIsStatic) {

        var oThis = (typeof bIsStatic != 'undefined' && bIsStatic)? this: this.prototype;

        for ( var prop in oContext) {

            oThis[prop] = oContext[prop];

        }

    }

    var opt = {

      canvas : document.getElementById('canvas'),

      ctx: document.getElementById('canvas').getContext('2d'),

      w: window.innerWidth,

      h: window.innerHeight,

      fireworks: [],//烟花

      grains: [],//粒子

      x: 0,

      y: 0,

      mousedown: false,

      hue: 0,//色调

      totalLimite: 5,

      limite: 0,

      totalTime: 80,

      time: 0

    };

    opt.canvas.width = opt.w;

    opt.canvas.height = opt.h;

    function random(min,max){

      return Math.random()*(max-min)+min;

    }

    function calcuDis(x1,y1,x2,y2){

      return Math.sqrt(Math.pow(x1-x2,2)+Math.sqrt(y1-y2,2));

    }

    function Firework( x1, y1, x2, y2 ) {

      this.x = this.x1 = x1;

      this.y = this.y1 = y1;

      this.x2 = x2;

      this.y2 = y2;

      this.target = calcuDis( x1, y1, x2, y2 );

      this.distance = 0;

      this.position = [];

      for(var i = 2; i >= 0; i--)  {

        this.position.push( [ this.x, this.y ] );

      }

      this.angle = Math.atan2( y2 - y1, x2 - x1 );

      this.speed = 2;

      this.acceleration = 1.05;//加速度

      this.lightness = random( 50, 70 );

      this.targetRadius = 1;

    }

    Firework.extend({

        update: function(index) {

            this.position.pop();

            this.position.unshift( [ this.x, this.y ] );

            if( this.targetRadius < 8 ) {

              this.targetRadius += 0.3;

            } else {

              this.targetRadius = 1;

            }

            this.speed *= this.acceleration;

            var x = Math.cos( this.angle ) * this.speed,

                y = Math.sin( this.angle ) * this.speed;

            this.distance = calcuDis( this.x1, this.y1, this.x + x, this.y + y );

            if( this.distance >= this.target ) {

              for(var i = 50; i >= 0; i--) {

                opt.grains.push( new Grain( this.x2, this.y2 ) );

              }

              opt.fireworks.splice( index, 1 );

            } else {

              this.x += x;

              this.y += y;

            }

        },

        draw: function() {

            opt.ctx.beginPath();

            opt.ctx.moveTo( this.position[ this.position.length - 1][ 0 ], this.position[ this.position.length - 1][ 1 ] );

            opt.ctx.lineTo( this.x, this.y );

            opt.ctx.strokeStyle = 'hsl(' + opt.hue + ', 100%, ' + this.lightness + '%)';

            opt.ctx.stroke();

            opt.ctx.closePath();

            opt.ctx.beginPath();

            opt.ctx.arc( this.x2, this.y2, this.targetRadius, 0, Math.PI * 2 );

            opt.ctx.stroke();

            opt.ctx.closePath();

        }

    });

    function Grain( x, y ) {

      this.x = x;

      this.y = y;

      this.position = [];

      for(var i = 4; i >= 0; i--) {

        this.position.push( [ this.x, this.y ] );

      }

      this.angle = random( 0, Math.PI * 2 );

      this.speed = random( 1, 10 );

      this.friction = 0.95;

      this.gravity = 1;

      this.hue = random( opt.hue - 10, opt.hue + 10 );

      this.lightness = random( 50, 80 );

      this.alpha = 1;

      this.decay = random( 0.01, 0.03 );

    }

    Grain.extend({

        update: function(index) {

            this.position.pop();

            this.position.unshift( [ this.x, this.y ] );

            this.speed *= this.friction;

            this.x += Math.cos( this.angle ) * this.speed;

            this.y += Math.sin( this.angle ) * this.speed + this.gravity;

            this.alpha -= this.decay;

            if( this.alpha <= this.decay ) {

              opt.grains.splice( index, 1 );

            }

        },

        draw: function() {

            opt.ctx.beginPath();

            opt.ctx.moveTo( this.position[ this.position.length - 1 ][ 0 ], this.position[ this.position.length - 1 ][ 1 ] );

            opt.ctx.lineTo( this.x, this.y );

            opt.ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.lightness + '%, ' + this.alpha + ')';

            opt.ctx.stroke();

            opt.ctx.closePath();

        }

    });

    function loop(){

      opt.ctx.globalCompositeOperation = 'destination-out';

      opt.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

      opt.ctx.fillRect( 0, 0, opt.w, opt.h );

      opt.ctx.globalCompositeOperation = 'lighter';

      opt.hue += 0.5;

      var i = opt.fireworks.length;

      while( i-- ) {

        opt.fireworks[ i ].draw();

        opt.fireworks[ i ].update( i );

      }

      i = opt.grains.length;

      while( i-- ) {

        opt.grains[ i ].draw();

        opt.grains[ i ].update( i );

      }

      if( opt.time >= opt.totalTime ) {

        if( !opt.mousedown ) {

          opt.fireworks.push( new Firework( opt.w / 2, opt.h, random( 0, opt.w ), random( 0, opt.h / 2 ) ) );

          opt.time= 0;

        }

      } else {

        opt.time++;

      }

      if( opt.limite >= opt.totalLimite ) {

        if( opt.mousedown ) {

          opt.fireworks.push( new Firework( opt.w / 2, opt.h, opt.x, opt.y ) );

          opt.limite = 0;

        }

      } else {

        opt.limite++;

      }

      requestAnimFrame(loop);

    }

    opt.canvas.onmousemove = function(e){

      opt.x = e.pageX - opt.canvas.offsetLeft;

      opt.y = e.pageY - opt.canvas.offsetTop;

    }

    opt.canvas.onmousedown = function(e){

      opt.mousedown = true;

    }

    opt.canvas.onmouseup = function(e){

      opt.mousedown = false;

    }

    window.onload= function(){

      loop();

    };

  </script>

</body>

</html>

原文地址：http://www.w3cfuns.com/blog-5444049-5404365.html

javascript--烟火效果的更多相关文章

Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
javascript 拖放效果
最近一直在看javascript的书籍,有些东西在书上看着貌似理解了,但是在真正动手实践时,其实有些细节你根本不了解.所以看起来就算是一个简单的效果,写起来也未必简单,就算写起来简单,写的代码也未必规 ...
javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
javascript动画效果之透明度(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
《JavaScript实用效果整理》系列分享专栏
整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 <JavaScript实用效果整理>已整理成PDF文档,点击可直 ...
【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

随机推荐

MS SQL巡检系列&mdash&semi;&mdash&semi;检查外键字段是否缺少索引
前言感想:一时兴起,突然想写一个关于MS SQL的巡检系列方面的文章,因为我觉得这方面的知识分享是有价值,也是非常有意义的.一方面,很多经验不足的人,对于巡检有点茫然,不知道要从哪些方面巡检,另外一方 ...
Java 8新特性-3 Lambda 表达式
在 Java 8 之前,匿名内部类,监听器和事件处理器的使用都显得很冗长,代码可读性很差. 在Java 8 之前使用匿名内部类: 例如 interface ITestPrint{ public voi ...
《BI那点儿事》数据流转换——条件性拆分
根据条件分割数据是一个在数据流中添加复杂逻辑的方法,它允许根据条件将数据输出到其他不同的路径中.例如,可以将TotalSugar< 27.4406的输出到一个路径,TotalSugar > ...
EasyUI概述
EasyUI是基于jQuery的一套UI框架,主要应用场景是后台管理系统的UI开发. 其提供了以下几个模块的插件 1.布局 2.菜单与按钮 3.表单 4.窗口可以让开发人员,特别是后端开发人员,在不 ...
每日一九度之题目1031：xxx定律
时间限制:1 秒内存限制:32 兆特殊判题:否提交:6870 解决:4302 题目描述: 对于一个数n,如果是偶数,就把n砍掉一半:如果是奇数,把n变成 3*n+ 1后砍掉一半,直到该数 ...
FZU 2027 单词问题 map标记字符串典型问题
题目链接:单词问题找一个字符串里的所有单词,重复的只输出一次.关于map函数key值是字符串的问题一直比较含糊... 挣扎了一番,大概是,map的key值是char型数组的时候,标记的是地址,于是有 ...
关于如果修改 ie 浏览器文本模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/stric ...
c&num; 委托delegate 编写计算器
.Net 中的委托类似于 C 或 C++ 中的函数指针.使用委托使程序员可以将方法引用封装在委托对象内.然后可以将该委托对象传递给可调用所引用方法的代码,而不必在编译时知道将调用哪个方法.与 C 或 ...
rails使用QQ邮箱发送邮件蛋疼的经历
以前本猫在blog中写过使用ruby发送邮件的博文,其中使用了163和qq的邮箱发送邮件都可以发送成功.但是现在使用rails的发送邮件功能,使用的是qq的邮件服务器发送,死活不可以!要不就是认证失败 ...
python3 Counter类（计数器）
Counter(计数器):用于追踪值的出现次数 Counter类继承dict类,所以它能使用dict类里面的方法创建一个Counter类 import collections obj = colle ...