<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>烟花-喷泉</title>

        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

        <style type="text/css">

            * {

                padding: 0;

                margin: 0;

            }

            html,

            body {

                position: relative;

                width: 100%;

                height: 100%;

            }

            body {

                background: #eee;

            }

            canvas {

                background: black;

                display: block;

                position: absolute;

                left: 50%;

                top: 50%;

                transform: translate(-50%, -50%);

            }

        </style>

    </head>

    <body>

        <canvas id="c"></canvas>

        <script type="text/javascript">

            ;

            (function(main) {

                main();

            })(function() {

                'use strict';

                var c = document.getElementById('c');

                var ctx = c.getContext('2d');

                var W = c.width = window.innerWidth;

                var H = c.height = window.innerHeight;

                var CX = W / 2;

                var CY = H / 2;

                var Particle = function(x, y, vx, vy) {

                    this.x = x;

                    this.y = y;

                    this.ox = x;

                    this.oy = y;

                    this.vx = vx;

                    this.vy = vy;

                    this.alpha = Math.random();

                    this.color = 25;

                    this.lineWidth = Math.random() * 5;

                };

                Particle.prototype = {

                    constructor: Particle,

                    update: function() {

                        this.vx += Math.random() * 0.5 - 0.25;

                        this.vy += 0.8;

                        this.vy *= 0.98;

                        this.alpha *= 0.95;

                        this.ox = this.x;

                        this.oy = this.y;

                        this.x += this.vx;

                        this.y += this.vy;

                        if(this.y < 0 || this.y > H || this.alpha < 0.1) {

                            this.vx = Math.random() * 2 - 1;

                            this.vy = Math.random() * -50;

                            this.ox = this.x = CX;

                            this.oy = this.y = H;

                            this.alpha = Math.random();

                        }

                    },

                    render: function(ctx) {

                        ctx.save();

                        ctx.globalAlpha = 0.98;

                        ctx.lineWidth = this.lineWidth;

                        ctx.strokeStyle = 'hsla(' + (this.color) + ',100%,50%,' + this.alpha + ')';

                        ctx.beginPath();

                        ctx.moveTo(this.ox, this.oy);

                        ctx.lineTo(this.x, this.y);

                        ctx.stroke();

                        ctx.restore();

                    }

                };

                var particleCount = 500;

                var particle = null;

                var particles = [];

                var interval = 0;

                for(var i = 0; i < 250; i++) {

                    particle = new Particle(CX, H, Math.random() * 2 - 1, Math.random() * -50);

                    particles.push(particle);

                }

                requestAnimationFrame(function loop() {

                    requestAnimationFrame(loop);

                    ctx.globalCompositeOperation = 'source-over';

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

                    ctx.fillRect(0, 0, W, H);

                    ctx.globalCompositeOperation = 'lighter';

                    if(particles.length < particleCount) {

                        particle = new Particle(CX, H, Math.random() * 2 - 1, Math.random() * -50);

                        particles.push(particle);

                    }

                    for(var i = 0, len = particles.length; i < len; i++) {

                        particle = particles[i];

                        particle.update();

                        particle.render(ctx);

                    }

                });

            });

        </script>

    </body>

</html>

Javascript学习--烟花的更多相关文章

  1. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  2. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  3. JavaScript学习（3）：函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  4. JavaScript学习（2）：对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  8. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  9. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

随机推荐

  1. 浏览器根对象window之screen

    1. screen 1.1 availHeight/Width screen.availWidth返回浏览器窗口可占用的水平宽度(单位:像素). screen.availHeight返回浏览器窗口在屏 ...

  2. MicroPython最全资料集锦丨TPYBoard全系列教程之文档＋例程源码

    MicroPython成功将Python引入到嵌入式领域,近几年MicroPython的发展和普及也证明,Python无疑将在未来几年内快速抢占和蚕食C/C++的份额.包括现在比较火爆的机器人.无人机 ...

  3. js 对象的值传递

    一.变量赋值的不同 1.原始值 在将一个保存着原始值的变量复制给另一个变量时,会将原始值的副本赋值给新变量,此后这两个变量是完全独立的. 2.引用值: 在将一个保存着对象内存地址的变量复制给另一个变量 ...

  4. 20 Zabbix系统性能优化建议

    点击返回:自学Zabbix之路 20 Zabbix系统性能优化建议 1. Zabbix性能变慢的可能表现: zabbix队列有太多被延迟的item,可以通过administration-queue查看 ...

  5. Spring_Spring与AOP

    一.传统编程使用代理解决目标类增强问题 //主业务接口 public interface ISomeService { // 目标方法 void doFirst(); // 目标方法 void doS ...

  6. C#中yield的使用

    yield 关键字向编译器指示它所在的方法是迭代器块.编译器生成一个类来实现迭代器块中表示的行为.在迭代器块中,yield 关键字与 return 关键字结合使用,向枚举器对象提供值.这是一个返回值, ...

  7. C# war3 巨魔精灵 minimap

    弃坑LOL后,无聊的时候玩玩 war3的RPG地图,巨魔与精灵.  玩了一段时间精灵....然后玩魔结果总是找不到人.所以就有了这个想法. 代码纯粹靠搬运. 说下原理,网上有份代码,可以查看当前选中目 ...

  8. 【java开发系列】—— 集合使用方法

    一.首先看一下集合的框架图: 由于collection也继承了Iterator和comparable接口,因此我们可以使用Iterator来遍历元素,也可以通过自定义compareTo函数来重新编写自 ...

  9. burpsuite截断上传webshell

    1.先设置好代理127.0.0.1 8080 2.开启截断模式 3.上传文件会被burp截断 4.在hex下找到你上传的webshell的16进制编码 5.把.后面的源码改为00 点击forward上 ...

  10. 详解zkw算法解决最小费用流问题

    网络流的一些基本概念 很多同学建立过网络流模型做题目, 也学过了各种算法, 但是对于基本的概念反而说不清楚. 虽然不同的模型在具体叫法上可能不相同, 但是不同叫法对应的思想是一致的. 下面的讨论力求规 ...