<!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. CheckForIllegalCrossThreadCalls = false

    多线程程序中,新创建的线程不能访问UI线程创建的窗口控件,这时如果想要访问窗口的控件,发现无法对其控制. 这时可将窗口构造函数中的CheckForIllegalCrossThreadCalls设置为f ...

  2. 地址总线、数据总线、寻址能力、字长及cpu位数等概念之间的关系

    地址总线决定了CPU的寻址能力:数据总线的宽度与字长及CPU位数一致. 详细解释见下文: 1.地址总线与寻址能力 要存取数据或指令就要知道数据或指令存放的位置,地址寄存器存储的就是CPU当前要存取的数 ...

  3. 解读Scrum燃尽图

    我的Understand the burndown chart读书笔记. 什么是燃尽图: 在敏捷开发中,燃尽图主要用于显示某一特定时间段内团队的剩余工作量,从而了解团队状态和项目进度. 燃尽图其实很简 ...

  4. 如何使用 Q#

    Q# 是微软的量子语言,很厉害,所以本文告诉大家如何入门,如何配置. 介绍 很多新的计数机技术都在很多年前就有人提出,量子计算就是其中一个.量子计算在 1980 年就被 Richard Feynman ...

  5. Redis随笔(三)主从搭建

    1.安装redis cd /root/svr/wget http://download.redis.io/releases/redis-3.2.9.tar.gz tar -zxvf redis-3.2 ...

  6. HTML5——localStorage

    html5的学习,忘记的差不多了,特地拿出来重新记录一下,从它的本地存储开始吧! 假设这样的html结构: <div id= "one_storage" class=&quo ...

  7. spring boot +mysql + mybatis + druid的整理(一)——单数据源

    一,使用spring boot脚手架搭建spring boot框架生成maven项目 如下图所示: 设置自定义的坐标,即左侧的Group和Artifact,右侧可以搜索添加一些依赖,搜索不到的可以在p ...

  8. flask开发框架

    # -*- coding: utf-8 -*- # import fcrm from fcrm import app if __name__ == '__main__': # fcrm.app.run ...

  9. NOIP2017游记

    日常大考之前感冒(这次感冒了3周..) Day -4~Day 0 停课一周,不写作业不上课是很爽,然而想到NOIP结束第二天就要期中考.. 在学校刷刷题,跟着一大堆大佬的步伐,做着一大堆大佬的题目(其 ...

  10. CTF---安全杂项入门第二题 A记录

    A记录分值:20 来源: sammie 难度:中 参与人数:2255人 Get Flag:566人 答题人数:621人 解题通过率:91% 他在看什么视频,好像很好看,不知道是什么网站的. 还好我截取 ...