看了一个烟花的html作品 --引用：http://www.w3cfuns.com/blog-5444049-5404365.html
最近老大想把项目改成响应式，一直在学习没时间更新博客。今天看到一个原生的js烟花项目，感觉很好，把记下来，以后把妹用。
[run]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
<title>烟花</title>
<style type="text/css">
body{
background-color: black;
margin: 0;
}
#canvas{
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.requestAnimFrame = (function () {
return window.requestAnimFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback,1000 / 60);
};
})();
Function.prototype.extend = function (oContext, bIsStatic) {
var oThis = (typeof bIsStatic != 'undefined' && bIsStatic)? this: this.prototype;
for ( var prop in oContext) {
oThis[prop] = oContext[prop];
}
}
var opt = {
canvas : document.getElementById('canvas'),
ctx: document.getElementById('canvas').getContext('2d'),
w: window.innerWidth,
h: window.innerHeight,
fireworks: [],//烟花
grains: [],//粒子
x: 0,
y: 0,
mousedown: false,
hue: 0,//色调
totalLimite: 5,
limite: 0,
totalTime: 80,
time: 0
};
opt.canvas.width = opt.w;
opt.canvas.height = opt.h;
function random(min,max){
return Math.random()*(max-min)+min;
}
function calcuDis(x1,y1,x2,y2){
return Math.sqrt(Math.pow(x1-x2,2)+Math.sqrt(y1-y2,2));
}
function Firework( x1, y1, x2, y2 ) {
this.x = this.x1 = x1;
this.y = this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.target = calcuDis( x1, y1, x2, y2 );
this.distance = 0;
this.position = [];
for(var i = 2; i >= 0; i--) {
this.position.push( [ this.x, this.y ] );
}
this.angle = Math.atan2( y2 - y1, x2 - x1 );
this.speed = 2;
this.acceleration = 1.05;//加速度
this.lightness = random( 50, 70 );
this.targetRadius = 1;
}
Firework.extend({
update: function(index) {
this.position.pop();
this.position.unshift( [ this.x, this.y ] );
if( this.targetRadius < 8 ) {
this.targetRadius += 0.3;
} else {
this.targetRadius = 1;
}
this.speed *= this.acceleration;
var x = Math.cos( this.angle ) * this.speed,
y = Math.sin( this.angle ) * this.speed;
this.distance = calcuDis( this.x1, this.y1, this.x + x, this.y + y );
if( this.distance >= this.target ) {
for(var i = 50; i >= 0; i--) {
opt.grains.push( new Grain( this.x2, this.y2 ) );
}
opt.fireworks.splice( index, 1 );
} else {
this.x += x;
this.y += y;
}
},
draw: function() {
opt.ctx.beginPath();
opt.ctx.moveTo( this.position[ this.position.length - 1][ 0 ], this.position[ this.position.length - 1][ 1 ] );
opt.ctx.lineTo( this.x, this.y );
opt.ctx.strokeStyle = 'hsl(' + opt.hue + ', 100%, ' + this.lightness + '%)';
opt.ctx.stroke();
opt.ctx.closePath();
opt.ctx.beginPath();
opt.ctx.arc( this.x2, this.y2, this.targetRadius, 0, Math.PI * 2 );
opt.ctx.stroke();
opt.ctx.closePath();
}
});
function Grain( x, y ) {
this.x = x;
this.y = y;
this.position = [];
for(var i = 4; i >= 0; i--) {
this.position.push( [ this.x, this.y ] );
}
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 10 );
this.friction = 0.95;
this.gravity = 1;
this.hue = random( opt.hue - 10, opt.hue + 10 );
this.lightness = random( 50, 80 );
this.alpha = 1;
this.decay = random( 0.01, 0.03 );
}
Grain.extend({
update: function(index) {
this.position.pop();
this.position.unshift( [ this.x, this.y ] );
this.speed *= this.friction;
this.x += Math.cos( this.angle ) * this.speed;
this.y += Math.sin( this.angle ) * this.speed + this.gravity;
this.alpha -= this.decay;
if( this.alpha <= this.decay ) {
opt.grains.splice( index, 1 );
}
},
draw: function() {
opt.ctx.beginPath();
opt.ctx.moveTo( this.position[ this.position.length - 1 ][ 0 ], this.position[ this.position.length - 1 ][ 1 ] );
opt.ctx.lineTo( this.x, this.y );
opt.ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.lightness + '%, ' + this.alpha + ')';
opt.ctx.stroke();
opt.ctx.closePath();
}
});
function loop(){
opt.ctx.globalCompositeOperation = 'destination-out';
opt.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
opt.ctx.fillRect( 0, 0, opt.w, opt.h );
opt.ctx.globalCompositeOperation = 'lighter';
opt.hue += 0.5;
var i = opt.fireworks.length;
while( i-- ) {
opt.fireworks[ i ].draw();
opt.fireworks[ i ].update( i );
}
i = opt.grains.length;
while( i-- ) {
opt.grains[ i ].draw();
opt.grains[ i ].update( i );
}
if( opt.time >= opt.totalTime ) {
if( !opt.mousedown ) {
opt.fireworks.push( new Firework( opt.w / 2, opt.h, random( 0, opt.w ), random( 0, opt.h / 2 ) ) );
opt.time= 0;
}
} else {
opt.time++;
}
if( opt.limite >= opt.totalLimite ) {
if( opt.mousedown ) {
opt.fireworks.push( new Firework( opt.w / 2, opt.h, opt.x, opt.y ) );
opt.limite = 0;
}
} else {
opt.limite++;
}
requestAnimFrame(loop);
}
opt.canvas.onmousemove = function(e){
opt.x = e.pageX - opt.canvas.offsetLeft;
opt.y = e.pageY - opt.canvas.offsetTop;
}
opt.canvas.onmousedown = function(e){
opt.mousedown = true;
}
opt.canvas.onmouseup = function(e){
opt.mousedown = false;
}
window.onload= function(){
loop();
};
</script>
</body>
</html>
看了一个烟花的html作品 --引用：http://www.w3cfuns.com/blog-5444049-5404365.html的更多相关文章
- 独立看第一个C++程序到最终结果log----2019-04-15
本文纯为本人记录,有网上诸多参考,请勿转发! 记录可能可能有点啰嗦,自己划重点吧!! (无论是生活还是工作,如果很困惑,千万不要消极一定要勇敢积极的面对它,不用说太多懂得人自然懂,一定要解决这个疑惑就 ...
- 今天我看了一个H5游戏EUI的例子，我都快分不清我到底是在用什么语言编译了代码了，作为刚刚学习H5游戏开发的菜鸟只能默默的收集知识
今天看了一个EUI的demo,也是接触H5游戏开发的第五天了,我想看看我能不能做点什么出来,哎,自己写果然还是有问题的.在看EUI哪一个demo的时候就遇见了一些摇摆不定的问题,我觉得提出来 1.to ...
- java中使用final关键字修饰一个变量时，是引用不能变，还是引用的对象不能变？
java中使用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变? 是引用对象的地址值不能变,引用变量所指向的对象的内容是可以改变. final变量永远指向这个对象,是一个常量指针,而 ...
- 独立看第一个C++程序到最终结果log----2019-04-16
(如果一个人夸你,千万别相信,一个人真优秀是不需要说出来的,所以别人夸你的时候也是自己最松懈的时候,千万不能飘,只能说明自己不是很差而已,世界上优秀的人很多,一直优秀到最后的人却是凤毛菱角. 如果一个 ...
- Mybatis轻松入门（仅要求会用看着一个就够了，略过源码分析部分即可）
文章目录 ==一.概念== 二.快速入门 1.开发步骤 2.环境搭建 2.1.导入Mybatis的坐标和其他坐标 2.2.创建User表 2.3.编写实体 2.4.编写UserMapper配置文件 2 ...
- 一个C#序列化时循环引用的问题
以前一直没搞懂为什么C#在做对象序列化时(Json序列化,XML序列化等)有时候会出现循环引用的问题,下面写了个例子,类People有一个属性引用了类Child,而类Child也有一个属性引用了类Pe ...
- C#面试-关于const和readonly（看了一个点赞很多的帖子有感而发！）
前景提要: 最近大家都在面试,讨论最多.最基础的问题,莫过于“关于const和readonly常见的笔试题剖析”,等等的大牛解析.我就是一个小菜,只不过,有点不敢苟同大牛的意见.废话少说,进入重点. ...
- 一个注意事项：内部类引用的外部变量必须是final的
之前写过一个项目,好久没更新了,最近翻起以前的代码,发现在这里报了一个错.(现在转到Intellij了,从前在Eclipse luna中是可以编译通过的,Eclipse mars也会报错,JDK版本都 ...
- 用python做一个烟花show
烟花效果如图(截了几个时刻的静态图): 源代码如下: # -*- coding: utf-8 -*- # Nola import tkinter as tk from PIL import Image ...
随机推荐
- 项目实战（连载）：基于Angular2+Mongodb+Node技术实现的多用户博客系统教程（2）
本章主要讲什么(一句话)? <项目实战:基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)> -- 基于MongoDB的MyBlog数据库知识技术储备(上 ...
- Hadoop权威指南:MapReduce应用开发
Hadoop权威指南:MapReduce应用开发 [TOC] 一般流程 编写map函数和reduce函数 编写驱动程序运行作业 用于配置的API Hadoop中的组件是通过Hadoop自己的配置API ...
- js之Math对象
; var num1 = Math.floor(num); // 向下取整 var num2 = Math.ceil(num); // 向上取整 document.write(num2+'-<b ...
- We Chall-Training: ASCII—Writeup
MarkdownPad Document html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,ab ...
- Struts系列笔记(6)---action接收请求参数
action接收请求参数 在web开发中,去接收请求参数来获得表单信息非常的常见,自己也总结整理了有关Struts2通过action接收请求参数的几种方法. Struts2 提供三种数据封装的方式: ...
- webqq的注册登记和聊天页面--运用jsonp跨域
简介: 我们知道,ajax用于数据交互,但它不能跨域,跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求 http://www.google. ...
- webpack入门与解析(一)
每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如ht ...
- wikioi 3132 高精度乘法（FFT）
第一次学FFT，先膜拜一下法法塔大神ORZ 关于FFT的话，有一篇博文特别赞http://z55250825.blog.163.com/blog/static/15023080920143127465 ...
- angular.js学习笔记：实现商品价格计算实例
<!DOCTYPE html> <html lang="en" ng-app> <!-- ng-app:初始化的指令 也可以解析局部--> &l ...
- 自己写的python脚本（抄的别人的，自己改了改，用于整理大量txt数据并插入到数据库）
昨天,遇到了一个问题,有100w条弱口令数据,需要插入到数据库中,而且保存格式为txt. 身为程序员不可能一条一条的去写sql语句吧(主要是工作量太大,我也懒得干).所以,我 就百度了一下,看有没有相 ...