最近老大想把项目改成响应式，一直在学习没时间更新博客。今天看到一个原生的js烟花项目，感觉很好，把记下来，以后把妹用。

[run]<!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>

看了一个烟花的html作品 --引用：http://www.w3cfuns.com/blog-5444049-5404365.html的更多相关文章

  1. 独立看第一个C++程序到最终结果log----2019-04-15

    本文纯为本人记录,有网上诸多参考,请勿转发! 记录可能可能有点啰嗦,自己划重点吧!! (无论是生活还是工作,如果很困惑,千万不要消极一定要勇敢积极的面对它,不用说太多懂得人自然懂,一定要解决这个疑惑就 ...

  2. 今天我看了一个H5游戏EUI的例子，我都快分不清我到底是在用什么语言编译了代码了，作为刚刚学习H5游戏开发的菜鸟只能默默的收集知识

    今天看了一个EUI的demo,也是接触H5游戏开发的第五天了,我想看看我能不能做点什么出来,哎,自己写果然还是有问题的.在看EUI哪一个demo的时候就遇见了一些摇摆不定的问题,我觉得提出来 1.to ...

  3. java中使用final关键字修饰一个变量时，是引用不能变，还是引用的对象不能变？

    java中使用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变? 是引用对象的地址值不能变,引用变量所指向的对象的内容是可以改变. final变量永远指向这个对象,是一个常量指针,而 ...

  4. 独立看第一个C++程序到最终结果log----2019-04-16

    (如果一个人夸你,千万别相信,一个人真优秀是不需要说出来的,所以别人夸你的时候也是自己最松懈的时候,千万不能飘,只能说明自己不是很差而已,世界上优秀的人很多,一直优秀到最后的人却是凤毛菱角. 如果一个 ...

  5. Mybatis轻松入门（仅要求会用看着一个就够了，略过源码分析部分即可）

    文章目录 ==一.概念== 二.快速入门 1.开发步骤 2.环境搭建 2.1.导入Mybatis的坐标和其他坐标 2.2.创建User表 2.3.编写实体 2.4.编写UserMapper配置文件 2 ...

  6. 一个C#序列化时循环引用的问题

    以前一直没搞懂为什么C#在做对象序列化时(Json序列化,XML序列化等)有时候会出现循环引用的问题,下面写了个例子,类People有一个属性引用了类Child,而类Child也有一个属性引用了类Pe ...

  7. C#面试-关于const和readonly（看了一个点赞很多的帖子有感而发！）

    前景提要: 最近大家都在面试,讨论最多.最基础的问题,莫过于“关于const和readonly常见的笔试题剖析”,等等的大牛解析.我就是一个小菜,只不过,有点不敢苟同大牛的意见.废话少说,进入重点. ...

  8. 一个注意事项：内部类引用的外部变量必须是final的

    之前写过一个项目,好久没更新了,最近翻起以前的代码,发现在这里报了一个错.(现在转到Intellij了,从前在Eclipse luna中是可以编译通过的,Eclipse mars也会报错,JDK版本都 ...

  9. 用python做一个烟花show

    烟花效果如图(截了几个时刻的静态图): 源代码如下: # -*- coding: utf-8 -*- # Nola import tkinter as tk from PIL import Image ...

随机推荐

  1. A tutorial on Principal Components Analysis | 主成分分析（PCA）教程

    A tutorial on Principal Components Analysis 原著:Lindsay I Smith, A tutorial on Principal Components A ...

  2. ios NSString拼接方法总结

    NSString* string; // 结果字符串 02 NSString* string1, string2; //已存在的字符串,需要将string1和string2连接起来 03   04 / ...

  3. SQLSERVER 运维日记-数据库状态

    背景 新年伊始,小伙伴是不是还处于假期综合症的状态.我们在日常运维数据库的时候,会时常查看数据库的状态,检查数据库是否正常运行.对于这些状态的熟悉对于我们处理数据库无法访问的 问题非常重要.当数据库突 ...

  4. bootstrap table编辑操作的时候 在模态框里加载iframe页面（加载的页面是在另一个页面做编辑）的时候如何关闭模态框和刷新table

    //关闭模态框                             window.parent.$('#myModal').modal('hide'); //修改成功后刷新table表格      ...

  5. Java字符串之String与StringBuilder

    String与SringBuiler的一些比较   在Java中,我们会大量使用字符串,但是String究竟是怎样工作的我们可能没有想过太多,其实在String类中,每一个看起来会修改String值的 ...

  6. 【死磕Java并发】-----Java内存模型之happend-before

    在上篇博客([死磕Java并发]-–深入分析volatile的实现原理)LZ提到过由于存在线程本地内存和主内存的原因,再加上重排序,会导致多线程环境下存在可见性的问题.那么我们正确使用同步.锁的情况下 ...

  7. Android EventBus 3.0 实例使用详解

    EventBus的使用和原理在网上有很多的博客了,其中泓洋大哥和启舰写的非常非常棒,我也是跟着他们的博客学会的EventBus,因为是第一次接触并使用EventBus,所以我写的更多是如何使用,源码解 ...

  8. windows下搭建Nexus3私服和基于IDEA15的Maven学习笔记

    搭建Nexus私服. 首先去官网下载window下用的zip文件.https://www.sonatype.com/download-oss-sonatype. 解压之后包含下面两个文件 进入nexu ...

  9. 8086cpu

    1.  8086CPU和8088CPU内部结构基本相同,不同之处在于8088有8条外部数据总线,因此为准16位.8086有16条外部数据总线.两个CPU的软件完全兼容,程序的编制也完全相同. 2.   ...

  10. C语言位运算符：与、或、异或、取反、左移和右移

    语言位运算符:与.或.异或.取反.左移和右移 位运算是指按二进制进行的运算.在系统软件中,常常需要处理二进制位的问题.C语言提供了6个位操作运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符 ...