<!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. js 类数组arguments详解

    arguments并不是一个真正的数组,而是一个"类似数组(array-like)"的对象: 就像下面的这段输出,就是典型的类数组对象: [, , callee: ƒ, Symbo ...

  2. angular4.0使用JSONP数据请求

    ng4中有很多获取数据的API,为了满足跨域的需求,我选择JSONP模块: 应该有很多小伙伴遇到这个报错吧 injected script did not invoke callback: 下面我写个 ...

  3. Atlas 安装报错 package Atlas-2.2.1-1.x86_64 is intended for a x86_64 architecture

    安装atlas 报错: package Atlas-2.2.1-1.x86_64 is intended for a x86_64 architecture 百度了好久没找到相关信息,最后看见官网文档 ...

  4. tomcat配置https协议

    tomcat配置https协议 1.找到本地jdk底下的bin目录,bin目录底下存在文件keytool.exe(在bin目录下空白处,按住shift右击,打开命令窗口,如下图) 2.在cmd的命令窗 ...

  5. Specified key was too long max key length is 1000 bytes

    Mysql建立索引时遇到一个问题就是索引字段长度太长,解决办法: 1.修改字段长度 : 2.修改mysql默认的存储引擎 ,修改为INNODB: https://www.2cto.com/databa ...

  6. python 命令

    pip list 可以查看已经安装的插件 pip show name 可以查看插件的信息(如:pip show selenium) pip install selenium==[version num ...

  7. Python数据分析与可视化(经典学习资料)

    Numpy:来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多,本身是由C语言开发.这个是很基础的扩展,其余的扩展都是以此为基础.数据结构为 ...

  8. vb代码之------画一个半透明矩形

    入吾QQ群183435019 (学习 交流+唠嗑). 废话不说,咱们来看代码吧 程序结果运行如下 需要如下API 1:GdipCreateFromHDC 功能:创建设备场景相对应的绘图区域(相当于给设 ...

  9. java_web学习(十一) 层的概念与应用

    一个项目通常分为三层: 所谓三层是表述层(WEB层).业务逻辑层(Business Logic),以及数据访问层(Data Access). ·WEB层:包含JSP和Servlet等与WEB相关的内容 ...

  10. iOS 使用矢量图

    iOS 使用矢量图 iOS 图标通常用 PNG 格式的图片.PNG 图片放大到超过自身的大小就会模糊.可以使用 PDF 格式的矢量图,优点是任意改变图片大小并且保持清晰度. 简单使用 与 PNG 格式 ...