<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. 洛谷P1373 小a和uim之大逃离[背包DP]

    题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北部天边急涌过来,还伴着一道道闪电,一阵阵雷声.刹那间,狂风大作,乌云布满了天空,紧接着豆大的雨点从天空中打落下来,只见前方出现了一个 ...

  2. NOIP2012国王游戏

      题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排 成一排,国王站在 ...

  3. 第7章 权限管理（3）_文件系统属性和sudo权限

    3. 文件系统属性chattr权限 (1)chattr命令 命令格式: #chattr [+-=][选项] 文件或目录名 +.-.= 分别表示增加权限.删除权限和赋于某种权限 选项 i:主要用来防止对 ...

  4. [自学总结] Unity5.3 API 之 Audio Mixer

    unity5.3 - API - class AudioMixer 和 class AudioMixerGrou问题:之前版本声音的渐入渐出太生硬,声音的特效需要自己手动编写.分析:5.0版本重大更新 ...

  5. oracle基本操作符/运算符/操作语言

    racle中的操作符算术操作符: 无论是在sqlserver,或者是java中,每种语言它都有算术操作符,大同小异.Oracle中算术操作符(+)(-)(*)(/) 值得注意的是:/ 在oracle中 ...

  6. sqlserver 2008R2数据库迁移oracle

    x项目需要,将以前的sqlserver数据库迁移的oracle数据库中,由于以前对oracle只是在DML语句的步骤,所以总结一下这次遇到的问题以及具体步骤 1,oracle新建数据库 新建Oracl ...

  7. React官网学习笔记

    欢迎指导与讨论 : ) 前言 本文主要是笔者在React英文官网学习时整理的笔记.由于笔者水平有限,如有错误恳请指出 O(∩_∩)O 一 .Tutoial 篇 1 . React的组件类名的首字母必须 ...

  8. canvas弹动2

    在上一次的例子上加深一点点,这次我们选择动态的绑定目标点,三个目标相互转化,实现的思路是以拖拽点为目标计算出除了拖拽点以外的两个圆球的位置 以上个案例的公式,设点分别为A,B,C,当我拖拽点A时其余两 ...

  9. logging 模块

    import logging logging.basicConfig(filename='log.log', format='%(asctime)s - %(name)s - %(levelname) ...

  10. iOS 如何打开后灯（闪光灯）

    - (void)torchOnOrOff { AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMedia ...