<!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. python键盘读入的input方法

    今天了解了一下python,学了一些小东西,便存下了: input函数(raw_input在3.0版本没有,所以就不说了!) num = input ("输入一个数:")  |备注 ...

  2. git命令记录

    1, clone 远程分支 git clone 命令默认的只会建立master分支,如果你想clone指定的某一远程分支(如:dev)的话,可以如下: A. 查看所有分支(包括隐藏的)  git br ...

  3. 一个InnoDB性能超过Oracle的调优Case

    年前抽空到兄弟公司支援了一下Oracle迁移MySQL的测试,本想把MySQL调优到接近Oracle的性能即可,但经过 @何_登成 @淘宝丁奇 @淘宝褚霸 @淘伯松 诸位大牛的指导和帮助(排名不分先后 ...

  4. CentOS配置SSH免密登录

    假如我们有两台CentOS机器,192.168.199.101,192.168.199.102,要想在101上远程连接102可以通过ssh命令来实现 ssh 192.168.199.102 如果没有配 ...

  5. Flask基础

    简介 Flask是当下流行的Web框架,它是用Python实现的.Flask显著的特点是:它是一个“微”框架.”微”意味着Flask旨在保持核心的简单,但同时又易于扩展.默认情况下,Flask 不包含 ...

  6. Django-常用模板标签及过滤器

    常用模板标签及过滤器 标签和过滤器完整介绍 https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 模板的组成 HTML代码+ 逻 ...

  7. python 单下划线/双下划线使用总结

    文章转自:http://blog.csdn.net/pfm685757/article/details/45918575

  8. 【转载】从头编写 asp.net core 2.0 web api 基础框架 (1)

    工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相 ...

  9. VFS四大对象之四-struct file

    继上一篇文章: http://www.cnblogs.com/linhaostudy/p/7428971.html 四.file结构体 文件对象:注意文件对象描述的是进程已经打开的文件.因为一个文件可 ...

  10. JAVA基础-File类

    一.File类概述 File类是文件和目录路径名的抽象表示形式.File类可以理解为一个文件路径或者文件夹路径的JAVA表现形式,而路径又可以分为绝对路径(是一个固定路径,从盘符开始),相对路径(相对 ...