<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. 洛谷P2964 [USACO09NOV]硬币的游戏A Coin Game

    题目描述 Farmer John's cows like to play coin games so FJ has invented with a new two-player coin game c ...

  2. MySQL的基本知识 -- 函数

    MySQL基本知识 -- 进阶(常用的函数) Tags: MySQL MySQL进阶 1.计算字段 1.概念 : 如果客户端想要的数据格式不是数据库直接在表中存储的数据格式的话,有两种处理方式.第一种 ...

  3. JavaScript 输出

    javascript 没有任何打印或者输出的函数. 一.javascript 显示数据 javacript可以通过不同的方式来输出数据: 1.使用window.alert()弹出警告框 2.使用doc ...

  4. 解决Scala Play框架在Git Bash运行的异常：Could not find configuration file ../framework/sbt/sbt.boot.properties

    Git Bash+ConEmu可以模拟Linux强大的命令行.不过在结合Scala和Play时,需要注意如下事项: 1. Scala的安装在64位操作系统下,默认会放在“C:\Program File ...

  5. 【腾讯GAD暑期训练营游戏程序班】游戏中的设计模式作业说明文档

  6. 字符编码笔记：ASCII，Unicode和UTF-8 转

    本文出处 http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html 只是为了记录一下省得要去搜. 今天中午,我突然想搞清楚 ...

  7. 学python

    1.*和** def sum(*x): ans=0 for i in x: ans+=i return ans def haha(one,two): print(one,' ',two) print( ...

  8. 小记：目标数组的长度不够。请检查 destIndex 和长度以及数组的下限。

    异常:System.ArgumentException: 目标数组的长度不够.请检查 destIndex 和长度以及数组的下限.(不好意思忘记截图了) 发生异常的代码如下: var list = ne ...

  9. Ceph RGW 的 OSPF负载均衡 + quagga的配置

      随着开源技术的发展,以及商业设备价格的不断攀升.大公司总是希望能使用开源的方案来替换过去使用的商业设备.比如之前大家用的很多的F5和A10,现在已经在逐步被LVS替换.传统的单个lvs的性能是比不 ...

  10. 使用Maven Assembly plugin将依赖打包进jar

    一个Eclipse的工程,在pom中配置了若干依赖,需要将pom中所有的依赖全部打包进一个jar包中,可以选择的方案有maven-assembly-plugin和fatjar.以前采用fatjar进行 ...