<html>

<head>

<link type="text/css" rel="stylesheet" href="chrome-extension://ckphchjljlekndhjifdfpmmnlaijimcd/style.css">

</head>

<body screen_capture_injected="true">

<canvas id="canvas" width="1440" height="784">Canvas is not supported in your browser.</canvas>

        <style type="text/css">/* basic styles for black background and crosshair cursor */

body {

    background: #000;

    margin: 0;

}

canvas {

    cursor: crosshair;

    display: block;

}</style>

                <script>// when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval

// not supported in all browsers though and sometimes needs a prefix, so we need a shim

window.requestAnimFrame = ( function() {

    return window.requestAnimationFrame ||

                window.webkitRequestAnimationFrame ||

                window.mozRequestAnimationFrame ||

                function( callback ) {

                    window.setTimeout( callback, 1000 / 60 );

                };

})();

// now we will setup our basic variables for the demo

var canvas = document.getElementById( 'canvas' ),

        ctx = canvas.getContext( '2d' ),

        // full screen dimensions

        cw = window.innerWidth,

        ch = window.innerHeight,

        // firework collection

        fireworks = [],

        // particle collection

        particles = [],

        // starting hue

        hue = 120,

        // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks

        limiterTotal = 5,

        limiterTick = 0,

        // this will time the auto launches of fireworks, one launch per 80 loop ticks

        timerTotal = 80,

        timerTick = 0,

        mousedown = false,

        // mouse x coordinate,

        mx,

        // mouse y coordinate

        my;

// set canvas dimensions

canvas.width = cw;

canvas.height = ch;

// now we are going to setup our function placeholders for the entire demo

// get a random number within a range

function random( min, max ) {

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

}

// calculate the distance between two points

function calculateDistance( p1x, p1y, p2x, p2y ) {

    var xDistance = p1x - p2x,

            yDistance = p1y - p2y;

    return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );

}

// create firework

function Firework( sx, sy, tx, ty ) {

    // actual coordinates

    this.x = sx;

    this.y = sy;

    // starting coordinates

    this.sx = sx;

    this.sy = sy;

    // target coordinates

    this.tx = tx;

    this.ty = ty;

    // distance from starting point to target

    this.distanceToTarget = calculateDistance( sx, sy, tx, ty );

    this.distanceTraveled = 0;

    // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails

    this.coordinates = [];

    this.coordinateCount = 3;

    // populate initial coordinate collection with the current coordinates

    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 );

    // circle target indicator radius

    this.targetRadius = 1;

}

// update firework

Firework.prototype.update = function( index ) {

    // remove last item in coordinates array

    this.coordinates.pop();

    // add current coordinates to the start of the array

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

    // cycle the circle target indicator radius

    if( this.targetRadius < 8 ) {

        this.targetRadius += 0.3;

    } else {

        this.targetRadius = 1;

    }

    // speed up the firework

    this.speed *= this.acceleration;

    // get the current velocities based on angle and speed

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

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

    // how far will the firework have traveled with velocities applied?

    this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );

    // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached

    if( this.distanceTraveled >= this.distanceToTarget ) {

        createParticles( this.tx, this.ty );

        // remove the firework, use the index passed into the update function to determine which to remove

        fireworks.splice( index, 1 );

    } else {

        // target not reached, keep traveling

        this.x += vx;

        this.y += vy;

    }

}

// draw firework

Firework.prototype.draw = function() {

    ctx.beginPath();

    // move to the last tracked coordinate in the set, then draw a line to the current x and y

    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();

    // draw the target for this firework with a pulsing circle

    ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );

    ctx.stroke();

}

// create particle

function Particle( x, y ) {

    this.x = x;

    this.y = y;

    // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails

    this.coordinates = [];

    this.coordinateCount = 5;

    while( this.coordinateCount-- ) {

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

    }

    // set a random angle in all possible directions, in radians

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

    this.speed = random( 1, 10 );

    // friction will slow the particle down

    this.friction = 0.95;

    // gravity will be applied and pull the particle down

    this.gravity = 1;

    // set the hue to a random number +-20 of the overall hue variable

    this.hue = random( hue - 20, hue + 20 );

    this.brightness = random( 50, 80 );

    this.alpha = 1;

    // set how fast the particle fades out

    this.decay = random( 0.015, 0.03 );

}

// update particle

Particle.prototype.update = function( index ) {

    // remove last item in coordinates array

    this.coordinates.pop();

    // add current coordinates to the start of the array

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

    // slow down the particle

    this.speed *= this.friction;

    // apply velocity

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

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

    // fade out the particle

    this.alpha -= this.decay;

    // remove the particle once the alpha is low enough, based on the passed in index

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

        particles.splice( index, 1 );

    }

}

// draw particle

Particle.prototype.draw = function() {

    ctx. beginPath();

    // move to the last tracked coordinates in the set, then draw a line to the current x and y

    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();

}

// create particle group/explosion

function createParticles( x, y ) {

    // increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though

    var particleCount = 30;

    while( particleCount-- ) {

        particles.push( new Particle( x, y ) );

    }

}

// main demo loop

function loop() {

    // this function will run endlessly with requestAnimationFrame

    requestAnimFrame( loop );

    // increase the hue to get different colored fireworks over time

    hue += 0.5;

    // normally, clearRect() would be used to clear the canvas

    // we want to create a trailing effect though

    // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely

    ctx.globalCompositeOperation = 'destination-out';

    // decrease the alpha property to create more prominent trails

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

    ctx.fillRect( 0, 0, cw, ch );

    // change the composite operation back to our main mode

    // lighter creates bright highlight points as the fireworks and particles overlap each other

    ctx.globalCompositeOperation = 'lighter';

    // loop over each firework, draw it, update it

    var i = fireworks.length;

    while( i-- ) {

        fireworks[ i ].draw();

        fireworks[ i ].update( i );

    }

    // loop over each particle, draw it, update it

    var i = particles.length;

    while( i-- ) {

        particles[ i ].draw();

        particles[ i ].update( i );

    }

    // launch fireworks automatically to random coordinates, when the mouse isn't down

    if( timerTick >= timerTotal ) {

        if( !mousedown ) {

            // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen

            fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );

            timerTick = 0;

        }

    } else {

        timerTick++;

    }

    // limit the rate at which fireworks get launched when mouse is down

    if( limiterTick >= limiterTotal ) {

        if( mousedown ) {

            // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target

            fireworks.push( new Firework( cw / 2, ch, mx, my ) );

            limiterTick = 0;

        }

    } else {

        limiterTick++;

    }

}

// mouse event bindings

// update the mouse coordinates on mousemove

canvas.addEventListener( 'mousemove', function( e ) {

    mx = e.pageX - canvas.offsetLeft;

    my = e.pageY - canvas.offsetTop;

});

// toggle mousedown state and prevent canvas from being selected

canvas.addEventListener( 'mousedown', function( e ) {

    e.preventDefault();

    mousedown = true;

});

canvas.addEventListener( 'mouseup', function( e ) {

    e.preventDefault();

    mousedown = false;

});

// once the window loads, we are ready for some fireworks!

window.onload = loop;

</script>

<!-- Generated by RunJS (Tue Jan 20 15:47:58 CST 2015) 0ms --></body></html>

js制作烟花效果的更多相关文章

  1. js实现烟花效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js制作倒计时效果

    该程序可以计算任意指定的两个日期中间的差值. 本例子的指定日期是2017年1月1日,当前时间是2016年10月21日:计算它们之间的差值,在网页上显示如图所示: 关键部分代码: var nowtime ...

  3. 用JS制作博客页面背景随滚动渐变的效果

    今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好-- 下面就以我的博客园博客为例,介绍一下如何制作这个效果! 准备 [x] 申请博客园的JS ...

  4. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  5. 『HTML5梦幻之旅』-缤纷多姿的烟花效果

    天花无数月中开,五采祥云绕绛台.堕地忽惊星彩散,飞空旋作雨声来.怒撞玉斗翻晴雪,勇踏金轮起疾雷.更漏已深人渐散,闹竿挑得彩灯回. ——明·瞿佑·<烟火戏> 记得每年过春节的那段时间,除了欣 ...

  6. WEB烟花效果——Canvas实现

    摘要        本文主要介绍一种WEB形式的烟花(fireworks)效果(图1所示),该效果基于Canvas实现,巧妙地运用了canvas绘图的特性,并加入了物理力作用的模拟,使整体效果非常绚丽 ...

  7. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  8. 6 cocos2dx粒子效果，类图关系，系统原生粒子和自己定义粒子效果，粒子编译器软件，爆炸粒子效果，烟花效果，火焰效果，流星效果，漩涡粒子效果，雪花效果，烟雾效果，太阳效果，下雨效果

     1 粒子 演示样例 2 类图关系 3 系统原生粒子 CCParticleSystem 全部粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad ...

  9. 使用Vue.js制作仿Metronic高级表格（一）静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

随机推荐

  1. 嵌入式Linux驱动学习之路(十一)按键驱动-中断机制

    轮询方式: 和led驱动不同的是在配置IO引脚的时候,把LED的输出引脚换成输入,在read函数中向外发送io的状态.必须由应用程序不断的来查询当前IO口的状态来判断. 中断方式: /* file n ...

  2. （原创）JAVA多线程二线程池

    一,线程池的介绍 线程池包括一下三种: 线程池名称 创建方法 特点 其他 固定大小线程池 ExecutorService threadpool = Executors.newFixedThreadPo ...

  3. 10款.net 图形插件

    在如今这个读图时代,图形图表的可视化数据表现形式已成为一种趋势.因为图表能直观的展示信息.对比和趋势等,所以许多项目开发中都需要用到图表控件,而很多图表控件都是在.NET平台下开发的,今天就为大家推荐 ...

  4. git没有changId解决方法

    1.git branch work(从最新节点建立分支,相当于将自己的修改备份到新的分支) 2.git reset --hard HEAD~10(强制回滚多个节点) 3.git status 如果显示 ...

  5. mysqli_fetch_assoc php的新的库函数

    注释:mysql_fetch_assoc() 函数 定义和用法mysql_fetch_assoc() 函数从结果集中取得一行作为关联数组. 返回根据从结果集取得的行生成的关联数组,如果没有更多行,则返 ...

  6. C/C++实践笔记 006

    字符与字符串字符按照%d,打印ASCCII字符按%c,打印字符本身‘0’ 0 ‘\0’区别: char ch3=0; 等号会自动转换,转换成ASCCII值所对应的字符.即null或\0C字符串不可以直 ...

  7. C#软件设计——小话设计模式原则之：单一职责原则SRP

    前言:上篇C#软件设计——小话设计模式原则之:依赖倒置原则DIP简单介绍了下依赖倒置的由来以及使用,中间插了两篇WebApi的文章,这篇还是回归正题,继续来写写设计模式另一个重要的原则:单一职责原则. ...

  8. 基于FPGA的飞机的小游戏

    基于FPGA的飞机的小游戏 实验原理 该实验主要分为4个模块,采用至上而下的设计方法进行设计.由50M的晶振电路提供时钟源,VGA显示控制模块.图形显示控制模块.移动模块的时钟为25M,由时钟分频电路 ...

  9. bzoj3343

    3343: 教主的魔法 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1178  Solved: 527[Submit][Status][Discus ...

  10. bzoj 3262 陌上花开

    本质是一个三维偏序,一位排序后cdq分治,一维在子函数里排序,一维用树状数组维护. 把三维相等的合并到一个里面. #include<iostream> #include<cstdio ...