<!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. centos6快速搭建nginx

    step1:配置本地 yum库,保存   $vi   /etc/yum.repos.d/nginx.repo   [nginx] name=nginx repo baseurl=http://ngin ...

  2. python matplotlib 绘图基础

    在利用Python做数据分析时,探索数据以及结果展现上图表的应用是不可或缺的. 在Python中通常情况下都是用matplotlib模块进行图表制作. 先理下,matplotlib的结构原理: mat ...

  3. 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项

    小程序由于内置于微信,这使得它有了得天独厚的宣传和使用优势,本着学习的心态,我在官网上看了一遍开发文档,大致得出小程序框架的设计模式与使用注意事项(重点来了,其实开发文档某些方面叙述的并不仔细,甚至存 ...

  4. mysql之其他

    一 IDE工具介绍 下载链接:https://pan.baidu.com/s/1bpo5mqj 掌握: 1. 测试+链接数据库 2. 新建库 3. 新建表,新增字段+类型+约束 4. 设计表:外键 5 ...

  5. 【转载】MySQL · 性能优化· InnoDB buffer pool flush策略漫谈

    背景 我们知道InnoDB使用buffer pool来缓存从磁盘读取到内存的数据页.buffer pool通常由数个内存块加上一组控制结构体对象组成.内存块的个数取决于buffer pool inst ...

  6. 2017-07-18&19

    [toc] 数据库 for循环里写操作数据库是大忌!尤其是这种情况:一次查询的结果中有一个记录还要继续展开查询,两次查询的记录均不止一条.就很容易写成for循环里操作数据库了.解决办法就是循环里的每条 ...

  7. Python面试题解答

    1. 一个谜题 >>> t = (1, 2, [30, 40]) >>> t[2] += [50, 60] 到底会发生下面 4 种情况中的哪一种? a. t变成(1 ...

  8. springMvc项目的搭建,暂时没有整合持久层框架(java Config配置对比xml配置)

    public class WebInit implements WebApplicationInitializer { @Override public void onStartup(ServletC ...

  9. SpringBoot中出现的错误

    1.Field boy in com.huhu.SpringDemo.HelloController required a bean of type 'com.huhu.SpringBean.Boy' ...

  10. motan负载均衡/zookeeper集群/zookeeper负载均衡的关系

    motan/dubbo支持负载均衡.zookeeper有集群的概念.zookeeper似乎也能做负载均衡,这3者是什么关系呢? 3个概念:motan/dubbo负载均衡.zookeeper集群.zoo ...