- 浏览: 58564 次
- 性别:
- 来自: 江西
文章分类
最新评论
注:来自http://daimaren.cn/blog/?p=195
(function(){//粒子喷泉
var sp = function(posx,posy){
var c1=Math.floor(Math.random()*256),c2=Math.floor(Math.random()*256),c3=Math.floor(Math.random()*256);
this.posX = posx;
this.posY = posy;
this.velX = 0;
this.velY = 0;
this.shrink = 1;
this.size = 1;
this.drag = 1;
this.gravity = 0;
this.alpha = 0.5;
this.fade = 0;
this.update = function()
{
this.velX *= this.drag;
this.velY *= this.drag;
this.velY += this.gravity;
this.posX += this.velX;
this.posY += this.velY;
this.size *= this.shrink;
this.alpha -= this.fade;
}
this.render = function(c)
{
c.fillStyle = "rgba("+c1+","+c2+","+c3+","+this.alpha+")";
c.beginPath();
c.arc(this.posX, this.posY, this.size, 0, Math.PI*2, true);
c.closePath();
c.fill();
}
}
var spring = window['spring'] = function(){
var W = window.innerWidth,H=window.innerHeight,springArr=[],MaxSpring=150,context,_self=this;
this.printScr = function(){
document.write('<canvas width='+W+' height='+H+' id="Myspring"></canvas>')
};
this.randomRange = function(min,max){//返回随机范围值
return ((Math.random()*(max-min)) + min);
};
this.isCanDraw = function(){
return !!document.createElement('canvas').getContext;
};
this.makeSpring = function(nub){
for(var i=0;i<nub;i++){
var sps = new sp(_self.randomRange(1,W),100);
sps.velX = (Math.random()*20)-10;
sps.velY = (Math.random()*20)-10;
sps.drag = 0.96;
sps.gravity = 0.5;
sps.size = _self.randomRange(1,20);
springArr.push(sps);
}
};
this.init=function(){
if(_self.isCanDraw()){
_self.printScr();
var canvas = document.getElementById("Myspring");
context = canvas.getContext('2d');
_self.loop();
}
}
this.loop = function(){
_self.makeSpring(4);
context.fillStyle="rgb(0,0,0)";
context.fillRect(0,0,W, H);
for (i=0; i<springArr.length; i++)
{
var sp =springArr[i];
sp.render(context);
sp.update();
}
while(springArr.length>MaxSpring){
springArr.shift();
}
setTimeout(_self.loop,1000/30)
}
}
})();
var po = new spring();
po.init();
(function(){//粒子喷泉
var sp = function(posx,posy){
var c1=Math.floor(Math.random()*256),c2=Math.floor(Math.random()*256),c3=Math.floor(Math.random()*256);
this.posX = posx;
this.posY = posy;
this.velX = 0;
this.velY = 0;
this.shrink = 1;
this.size = 1;
this.drag = 1;
this.gravity = 0;
this.alpha = 0.5;
this.fade = 0;
this.update = function()
{
this.velX *= this.drag;
this.velY *= this.drag;
this.velY += this.gravity;
this.posX += this.velX;
this.posY += this.velY;
this.size *= this.shrink;
this.alpha -= this.fade;
}
this.render = function(c)
{
c.fillStyle = "rgba("+c1+","+c2+","+c3+","+this.alpha+")";
c.beginPath();
c.arc(this.posX, this.posY, this.size, 0, Math.PI*2, true);
c.closePath();
c.fill();
}
}
var spring = window['spring'] = function(){
var W = window.innerWidth,H=window.innerHeight,springArr=[],MaxSpring=150,context,_self=this;
this.printScr = function(){
document.write('<canvas width='+W+' height='+H+' id="Myspring"></canvas>')
};
this.randomRange = function(min,max){//返回随机范围值
return ((Math.random()*(max-min)) + min);
};
this.isCanDraw = function(){
return !!document.createElement('canvas').getContext;
};
this.makeSpring = function(nub){
for(var i=0;i<nub;i++){
var sps = new sp(_self.randomRange(1,W),100);
sps.velX = (Math.random()*20)-10;
sps.velY = (Math.random()*20)-10;
sps.drag = 0.96;
sps.gravity = 0.5;
sps.size = _self.randomRange(1,20);
springArr.push(sps);
}
};
this.init=function(){
if(_self.isCanDraw()){
_self.printScr();
var canvas = document.getElementById("Myspring");
context = canvas.getContext('2d');
_self.loop();
}
}
this.loop = function(){
_self.makeSpring(4);
context.fillStyle="rgb(0,0,0)";
context.fillRect(0,0,W, H);
for (i=0; i<springArr.length; i++)
{
var sp =springArr[i];
sp.render(context);
sp.update();
}
while(springArr.length>MaxSpring){
springArr.shift();
}
setTimeout(_self.loop,1000/30)
}
}
})();
var po = new spring();
po.init();
发表评论
-
jquery validate addMethod
2011-06-20 15:18 1495只能输入m-n个字符且至少有一个字母和一个数字 jQuer ... -
4个跨浏览器必备的函数
2011-05-26 13:58 685http://www.cssbaby.com/archives ... -
用jquery实现的文本框只能输入数字
2011-05-25 10:14 2248用jquery实现的文本框只能输入数字简单插件 $.fn. ... -
闭包理解
2011-04-28 11:51 762直接看到代码 var list = document.ge ... -
JS/DOM/Ajax/Framework(Jquery/Yui/Mootools/EXT)
2011-03-28 10:09 1023gotop效果 <script> var B ... -
jQuery 封装function
2011-03-25 16:37 1893// JavaScript Document (func ... -
利用浏览器默认方法获取浏览器当前位置
2011-03-19 13:53 977支持浏览器 IE FIREFOX SAFARI CHROME ... -
关于用jQuery实现效果
2011-03-19 09:37 7611、效果1:关于新闻信息文字上下切换 <div i ... -
jquery实现键盘上下键、return键选折li
2011-03-16 11:42 6543注释:code来源javaeye 使用前要引入jquery库 ... -
随滚动条移动的层
2011-02-15 09:51 771<!DOCTYPE html PUBLIC &quo ... -
yui的学习脚印
2011-01-30 22:37 930<!DOCTYPE html PUBLIC &quo ... -
vim 使用
2011-01-21 17:08 641vim命令 vi和vim是linux和u ... -
js左右滚动效果
2011-01-21 14:49 1792<!DOCTYPE html PUBLIC &quo ... -
javascript基础知识
2011-01-19 09:45 696注释:来自http://www.csssea.com/?p=7 ... -
Javascript浏览器兼容问题
2011-01-14 00:13 978Javascript浏览器兼容 1.doc ... -
一个简单的javascript tab选项卡
2011-01-13 20:51 1060<!DOCTYPE html PUBLIC &quo ... -
常用的正则表达式
2011-01-10 13:47 615/** *postal codes regular ... -
一些比较实用的javascript方法
2011-01-10 13:25 869动态加载javascript文件 <script t ... -
javacript实现根据选择不同国家选择显示不同的省/州
2010-12-29 01:13 1424/** * @author wangxiang * ... -
javascript方法(Methods)
2010-12-28 23:49 9211、Array array.concat(item..) co ...
相关推荐
html5 canvas实现蓝色的广场粒子喷泉动画特效源码
canvas粒子喷泉动画特效。鼠标点击 可以增加粒子喷泉效果
html5 canvas酷炫粒子喷泉动画特效 html5 canvas酷炫粒子喷泉动画特效
三维动画 粒子模型 喷泉,vc 6.0 编写 可旋转,很炫
喷泉+粒子科技,喷泉:喷射制定的字体, 粒子科技:模仿黑洞
基于HTML5 Canvas实现粒子喷泉动画特效源码.zip
基于webgl开发的粒子特效,喷泉效果,包括喷泉的gltf模型,粒子图片以及完整vue组件代码
HTML5+Three.js+WebGL实现带重力效果的粒子喷泉动画特效源码.zip
canvas粒子喷泉动画特效。鼠标点击 可以增加粒子喷泉效果
osg例子展示喷泉,雨雪等效果,你可以举一反三,为自己的程序设计好的粒子效果
利用3D max 中的pf粒子系统制作喷泉 范畴属于高级教程
flash 写的喷泉特效。 粒子效果,跟鼠标互动。 还是挺绚的。
unity喷泉粒子特效。unity喷泉资源包Realistic Water Fountain 1.0。有需要的赶紧
OPENGL 粒子系统 喷泉 OPENGL 粒子系统 喷泉 OPENGL 粒子系统 喷泉 OPENGL 粒子系统 喷泉 OPENGL 粒子系统 喷泉
这个非常简单的mod旨在将粒子喷泉添加到《毁灭战士》和所有pwads中的所有有效传送器中。 可以使用teleporter_flats_ color控制台命令进行配置。 只需将逗号分隔的平面名称添加到这些列表中,即可正确处理它们。 该...
基于OpenGL粒子系统的喷泉模拟 基于OpenGL粒子系统的喷泉模拟
主要利用OpenGL的粒子效果,利用随机函数实现的喷泉效果,20的喷泉水柱形成不同的形状,动态变化,静态变化等。
HTML5 Canvas技术已经不是...这次我们给大家分享一款基于HTML5 Canvas的3D绿色粒子动画,效果和之前介绍的HTML5 Canvas和SVG实现的五彩万花筒动画比较类似。但是缺陷在于这个动画在某些版本的chrome上运行比较卡顿。