<!DOCTYPE html>
<html>
<head>
<style>
body{background:#000;margin:0;}
canvas{cursor:crosshair;display:block;}
</style>
</head>
<body>
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script>
    window.requestAnimFrame=(function(){
        return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){
                window.setTimeout(callback,1000/60)
            }
    })();
    
    var canvas=document.getElementById("canvas"),ctx=canvas.getContext("2d"),cw=window.innerWidth,ch=window.innerHeight,fireworks=[],particles=[],hue=120,limiterTotal=5,limiterTick=0,timerTotal=80,timerTick=0,mousedown=false,mx,my;canvas.width=cw;canvas.height=ch;
    
    function random(min,max){return Math.random()*(max-min)+min}
    
    function calculateDistance(p1x,p1y,p2x,p2y){
        var xDistance=p1x-p2x,yDistance=p1y-p2y;
        return Math.sqrt(Math.pow(xDistance,2)+Math.pow(yDistance,2))
    }
    
    function Firework(sx,sy,tx,ty){
        this.x=sx;
        this.y=sy;
        this.sx=sx;
        this.sy=sy;
        this.tx=tx;
        this.ty=ty;
        this.distanceToTarget=calculateDistance(sx,sy,tx,ty);
        this.distanceTraveled=0;
        this.coordinates=[];
        this.coordinateCount=3;
        while(this.coordinateCount--)
            {
                this.coordinates.push([this.x,this.y])
            }
        this.angle=Math.atan2(ty-sy,tx-sx);
        this.speed=2;
        this.acceleration=1.05;
        this.brightness=random(50,70);
        this.targetRadius=1
    }
    
    Firework.prototype.update=function(index){
        this.coordinates.pop();
        this.coordinates.unshift([this.x,this.y]);
        if(this.targetRadius<8){
            this.targetRadius+=0.3
        }
            else{
                this.targetRadius=1
            }
            this.speed*=this.acceleration;
            var vx=Math.cos(this.angle)*this.speed,vy=Math.sin(this.angle)*this.speed;
            this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+vx,this.y+vy);
            if(this.distanceTraveled>=this.distanceToTarget){
                createParticles(this.tx,this.ty);
                fireworks.splice(index,1)
            }else{
                this.x+=vx;this.y+=vy
            }
    };
    
    Firework.prototype.draw=function(){
        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]);
        ctx.lineTo(this.x,this.y);
        ctx.strokeStyle="hsl("+hue+", 100%, "+this.brightness+"%)";
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(this.tx,this.ty,this.targetRadius,0,Math.PI*2);
        ctx.stroke()
    };
    
    function Particle(x,y){
        this.x=x;this.y=y;
        this.coordinates=[];
        this.coordinateCount=5;
        while(this.coordinateCount--){
            this.coordinates.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(hue-20,hue+20);
        this.brightness=random(50,80);
        this.alpha=1;
        this.decay=random(0.015,0.03)
    }
    
    Particle.prototype.update=function(index){
        this.coordinates.pop();
        this.coordinates.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){
            particles.splice(index,1)
        }
    };
    
    Particle.prototype.draw=function(){
        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]);
        ctx.lineTo(this.x,this.y);
        ctx.strokeStyle="hsla("+this.hue+", 100%, "+this.brightness+"%, "+this.alpha+")";
        ctx.stroke()
    };
    
    function createParticles(x,y){
        var particleCount=30;
        while(particleCount--){
            particles.push(new Particle(x,y))
        }
    }
    
    function loop(){
        requestAnimFrame(loop);
        hue+=0.5;
        ctx.globalCompositeOperation="destination-out";
        ctx.fillStyle="rgba(0, 0, 0, 0.5)";
        ctx.fillRect(0,0,cw,ch);
        ctx.globalCompositeOperation="lighter";
        var i=fireworks.length;
        while(i--){
            fireworks[i].draw();fireworks[i].update(i)
        }
        var i=particles.length;
        while(i--){
            particles[i].draw();particles[i].update(i)
        }
        if(timerTick>=timerTotal){
            if(!mousedown){
                fireworks.push(new Firework(cw/2,ch,random(0,cw),random(0,ch/2)));
                timerTick=0
            }
        }
        else{ timerTick++}
        
        if(limiterTick>=limiterTotal){
                if(mousedown){
                    fireworks.push(new Firework(cw/2,ch,mx,my));
                    limiterTick=0
                }
        }
        else{ limiterTick++}
    }
    
    canvas.addEventListener("mousemove",function(e){
        mx=e.pageX-canvas.offsetLeft;
        my=e.pageY-canvas.offsetTop
    });
    canvas.addEventListener("mousedown",function(e){
        e.preventDefault();mousedown=true
    });
    canvas.addEventListener("mouseup",function(e){
        e.preventDefault();mousedown=false
    });
    window.onload=loop;
</script>
</body>
</html>

js烟花特效的更多相关文章

  1. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  2. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  3. CSS3实现烟花特效 --web前端

    烟花特效,比较简单,直接贴代码了…… <!DOCTYPE html><html lang="en"><head> <meta charse ...

  4. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  5. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

  6. 墙裂推荐4款js网页烟花特效

    以下是几款网页特效和一款软件: http://keleyi.com/keleyi/phtml/jstexiao/1.htm  http://keleyi.com/keleyi/phtml/jstexi ...

  7. 原生JS投票特效

    效果:http://hovertree.com/texiao/js/24/ 效果图: 代码如下: <!DOCTYPE html> <html lang="en"& ...

  8. Js文字特效—文字段逐个变色循环

    自己用来练习的,附上详细注释,如果有和我一样喜欢并想要学习Dom特效创作的朋友,推荐先系统了解Javascript中Html Dom Object部分的内容,包括常用方法及属性. <!DOCTY ...

  9. javascript js写特效日历

    <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. JSP版（utf8编码）的Ueditor百度文章编辑器配置以及使用说明

    二话不说,先上图: 我配置好的效果大致是这些功能:基本的文字编辑功能.图片上传功能.附件上传功能.百度/谷歌地图搜索截图.视/音频发布功能.这个插件是现今我用过觉得最舒服的编辑器,功能齐全强大,稍微修 ...

  2. css控制文本框的只读属性的方法

    css 封装整个只读文本框的属性: .TextBoxReadOnly{ border:1px solid #C0C0C0; text-align:left; background-color:#D3D ...

  3. jQuery练习实例（四）

    最近写的jquery实例--jQuery图片九宫格样式鼠标悬停图片滑动切换效果 有兴趣的同学可以参考一下,这幅效果,个人觉得挺不错的 <%@ page language="java&q ...

  4. Android_设备隐私获取，忽略6.0权限管理

    1.前言 (1).由于MIUI等部分国产定制系统也有权限管理,没有相关api,故无法判断用户是否允许获取联系人等隐私.在Android 6.0之后,新增权限管理可以通过官方api判断用户的运行状态: ...

  5. 懂，你的App生，不懂，死！

    近期有一些开发人员.创业公司的人加我微信viyi88,咨询一些关于自己App的事情.被问得最多的可能就是:"我的App怎样推广添加下载量?"而且信誓旦旦地说自己的App做得非常好, ...

  6. show()与showDialog()的区别

    A.WinForm中窗体显示  显示窗体可以有以下2种方法:  Form.ShowDialog方法 (窗体显示为模式窗体) Form.Show方法 (窗体显示为无模式窗体) 2者具体区别如下: 1.在 ...

  7. python学习笔记--Django入门0 安装dangjo

    经过这几天的折腾,经历了Django的各种报错,翻译的内容虽然不错,但是与实际的版本有差别,会出现各种奇葩的错误.现在终于找到了解决方法:查看英文原版内容:http://djangobook.com/ ...

  8. SpringMVC项目学习1_web.xml

    最近接触的所有项目都是SpringMVC+ajax的项目,因此以一个项目为例学习下. --------------------------------------------------------- ...

  9. WS_CLIPCHILDREN和WS_CLIPSIBLINGS的理解(转载)

    1.1 WS_CLIPCHILDREN WS_CLIPCHILDREN样式从字面上可以理解成ClipChildren,裁减子窗口. MSDN里的E文解释:Excludes the area occup ...

  10. select 中使用 case when 和 replace

    在SELECT中,用CASE   例如:     select   a.Cname   as   Tcomname,b.Cname   as   TGoodname,D.nQuanty,c.cNote ...