<!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. 解决ios微信页面回退不刷新的问题

    在回退后需要刷新的页面加以下js $(function () {   var isPageHide = false;   window.addEventListener('pageshow', fun ...

  2. 通俗易懂的信息熵与信息增益（IE, Information Entropy; IG, Information Gain）

    信息熵与信息增益(IE, Information Entropy; IG, Information Gain) 信息增益是机器学习中特征选择的关键指标,而学习信息增益前,需要先了解信息熵和条件熵这两个 ...

  3. Geohash-》通过经纬度计算两地距离的函数

    /**      * 根据起点坐标和终点坐标测距离      * @param  [array]   $from  [起点坐标(经纬度),例如:array(118.012951,36.810024)] ...

  4. [Spark内核] 第36课：TaskScheduler内幕天机解密：Spark shell案例运行日志详解、TaskScheduler和SchedulerBackend、FIFO与FAIR、Task运行时本地性算法详解等

    本課主題 通过 Spark-shell 窥探程序运行时的状况 TaskScheduler 与 SchedulerBackend 之间的关系 FIFO 与 FAIR 两种调度模式彻底解密 Task 数据 ...

  5. PHP读取excel中地址实现多文件下载

    PHP文件下载有单文件和多文件之分,如果是单文件写个方法可以实现,但是如果想循环下载多个文件我试验是没有成功.先说单文件的下载,方法如下: function downfile($fileurl) { ...

  6. Java框架之Mybatis（二）

    本文主要介绍 Mybatis(一)之后剩下的内容: 1 mybatis 中 log4j的配置 2 dao层的开发(使用mapper代理的方式) 3 mybatis的配置详解 4 输入输出映射对应的类型 ...

  7. JDBC详解系列（四）之建立Stament和执行SQL语句

    建立Stament   在获得连接之后,我们就可以跟数据库进行交互了.   在JDBC中,我们发送SQL语句到数据库这些操作时通过Stament,Preparement,CallableStateme ...

  8. win10安装Tensorflow

    win10安装Tensorflow 前提: 保证你的pip>=8.1版本 否则利用python -m pip install -U pip  进行升级,或下载pip源文件 确定你的显卡是否支持c ...

  9. 厉害了，龙果！开源中国颁发了证书：GVP-码云最有价值开源项目

    roncoo-pay (龙果支付系统) roncoo-pay是国内首款开源的互联网支付系统,其核心目标是汇聚所有主流支付渠道,打造一款轻量.便捷.易用,且集支付.资金对账.资金清结算于一体的支付系统, ...

  10. 牛客网linux试题-错误整理-20170914

    Linux操作系统包括三种不同类型的进程,每种进程都有自己的特点和属性. 1.交互进程--由一个shell启动的进程.交互进程既可以在前台运行,也可以在后台运行. 2.批处理进程--这种进程和终端没有 ...