<!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. [Spark SQL] SparkSession、DataFrame 和 DataSet 练习

    本課主題 DataSet 实战 DataSet 实战 SparkSession 是 SparkSQL 的入口,然后可以基于 sparkSession 来获取或者是读取源数据来生存 DataFrameR ...

  2. [Spark性能调优] 源码补充 : Spark 2.1.X 中 Unified 和 Static MemoryManager

    本课主题 Static MemoryManager 的源码鉴赏 Unified MemoryManager 的源码鉴赏 引言 从源码的角度了解 Spark 内存管理是怎么设计的,从而知道应该配置那个参 ...

  3. 申请的服务器安装tomcat后不能访问的问题

    新申请的阿里云服务器,操作系统是CentOS6.5,安装jdk1.8版本,用java -version命令可以查看jdk版本,安装正确会有版本显示.然后安装tomcat,tomcat安装后默认端口是8 ...

  4. 关于FPGA的一些你必须知道的概念

    前仿真也称为功能仿真,主旨在于验证电路的功能是否符合设计要求,其特点是不考虑电路门延迟与线延迟,主要是验证电路与理想情况是否一致.可综合FPGA代码是用RTL级代码语言描述的,其输入为RTL级代码与T ...

  5. Linux-RED HAT6.8扩容

    项目快上线了,在准生产测试,遇到了一个问题,那就是Linux硬盘资源不够用了,这个问题是当时在装系统的时候,应该装机人员的失误造成的,具体如下: 这个报错原因就是硬盘资源不够用了,使用命令:df  - ...

  6. Codeforces-8VC Venture Cup 2016-Elimination Round-626A.暴力 626B.水题 626C.二分

    A. Robot Sequence time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  7. hdu_5104 Primes Problem()

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5104 rimes Problem Time Limit: 2000/1000 MS (Java/Oth ...

  8. C# 构造器总结

    在C#中,构造器分为实例构造器和类型构造器, 一.实例构造器 构造引用类型的对象时,在调用实例 构造器之前,为对象分配的内存总是归0,没有被构造器显示重写的字段都保证获得0或null的值 在一个类中, ...

  9. spring如何控制事务

    Spring 的事务,可以说是 Spring AOP 的一种实现. AOP面向切面编程,即在不修改源代码的情况下,对原有功能进行扩展,通过代理类来对具体类进行操作. spring是一个容器,通过spr ...

  10. javascript中函数的执行环境、作用域链、变量对象与活动对象

    javascript高级程序设计中:对执行环境.作用域链.变量对象.活动对象的解释: 1.执行环境: 执行环境:有时也叫环境:是JavaScript中最为重要的一个概念:执行环境定义了变量或函数有权访 ...