javascript--烟火效果
<!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>
原文地址：http://www.w3cfuns.com/blog-5444049-5404365.html
javascript--烟火效果的更多相关文章
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
- Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
- javascript 拖放效果
最近一直在看javascript的书籍,有些东西在书上看着貌似理解了,但是在真正动手实践时,其实有些细节你根本不了解.所以看起来就算是一个简单的效果,写起来也未必简单,就算写起来简单,写的代码也未必规 ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之透明度(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- 《JavaScript实用效果整理》系列分享专栏
整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 <JavaScript实用效果整理>已整理成PDF文档,点击可直 ...
- 【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
随机推荐
- 【转】MFC窗口句柄各类指针获取函数
原文网址:http://www.pythonschool.com/CPP_JHK/5003.html 获取所在类窗口的句柄 this->m_hwnd; // this是一个指针,指向当前类的实例 ...
- HDU 5922 Minimum’s Revenge 【模拟】 (2016CCPC东北地区大学生程序设计竞赛)
Minimum's Revenge Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- 学习嵌入式Linux有没有一个最佳的顺序（持续更新）
作为一个嵌入式Linux的初学者,我知道我可能将长期处于初学者阶段,因为我至今仍然没有能够摸索出一条很好的道路让我由初学者进入到更高级阶段.但是我始终没有放弃,本篇文章就是用来记录我学习嵌入式Linu ...
- php 错误信息配置
display_errors = on/off错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利.推荐关闭此选项. ...
- leetcode 字符串分割对称
public class Solution { public List<List<String>> partition(String s) { int len=s.length ...
- 细谈Java
重载:相同函数名,不同参数. 重写(覆写):父类和子类之间的,子类重写了父类的方法. java的多态:重载+覆写 1. Main方法: 是public的,也是static,也是void的,参 ...
- 虚拟机linux系统下ifconfig获取不到ip
原因:网卡未激活 1.输入ifup eth0命令激活网卡 2.输入ifconfig查询ip
- mount命令以及mount ntfs硬盘权限权限与显示的问题 分类： shell ubuntu 2014-11-08 18:29 148人阅读 评论(0) 收藏
sudo mount -t 文件系统类型 -o 可设置选项 设备路经 访问路经 #常用文件类型如下: iso9660 光驱文件系统, vfat fat/fat32分区, ntfs ntfs分区, sm ...
- 娓娓道来c指针 (3)指针和数组
(3)指针和数组 在c中指针和数组似乎有着千丝万缕的关系.事实上它们不是一回事:指针是指针,数组是数组.两者不同样. 说它们有关系,只是是由于常见这种代码: int main() { int arra ...
- android 47 service绑定
如果一个service已经启动了,activity和service绑定了在解除邦定,则这个service不会销毁,因为这个service不是这个Activity创建的. service生命周期: Ac ...