js制作的模拟超逼真下雨效果

一层秋雨一层凉。

小楼一夜听春雨。

虞美人·听雨

少年听雨歌楼上。红烛昏罗帐。壮年听雨客舟中。江阔云低、断雁叫西风。

而今听雨僧庐下。鬓已星星也。悲欢离合总无情。一任阶前、点滴到天明。

我是那迷恋微雨的过客。想着用js的代码在代码的世界里重现雨的时光。我搜集了很多的关于模拟下雨效果的代码。先上图：

暗夜下的雨，

js制作的超逼真下雨效果 (mubanmao.top)http://mubanmao.top/content/preview/ead3b804-4ac0-42c1-9923-0064d90e2e45

伴着电闪雷鸣的，雷雨

js逼真模拟下大雨风雨交加效果带声音 (mubanmao.top)http://mubanmao.top/content/preview?id=540adcaa-f801-4db8-bc39-fb698a801a73

亦或者3D世界里面的逼真的雨滴效果：

js逼真模拟农场森林下雨效果 (mubanmao.top)http://mubanmao.top/content/preview?id=39e27150-54e8-41f0-9ada-4e2a3ea69a78

还有更多的效果，请来我的世界查找：

模拟下雨的

// Rain.js
(function(window, undefined) {if (typeof Raphael == 'undefined') throw "Rain needs Rapha毛l.js!";Rain = function(element, speed, angle) {if (!(this instanceof arguments.callee)) { return new arguments.callee(arguments); };var self = this;self.init = function(element, config) {var defaults = {speed: 500, angle: 20, intensity: 5, size: 10, color: '#fff'};if (typeof config == 'undefined') {config = defaults;} else {for (var property in defaults) {if (typeof config[property] == 'undefined') config[property] = defaults[property];};}self.config = config;var elt = document.getElementById(element);self.stage = {element:  elt,width:    function() { return elt.getBoundingClientRect().width; },height:   function() { return elt.getBoundingClientRect().height; }};self.canvas = Raphael(self.stage.element);self.offset = (Math.tan(config.angle * Math.PI / 180) * self.stage.height());runEngine();return self;};function runEngine() {self.enginePid = setInterval(function() { createDrop(self.config); }, 100 / self.config.intensity);}function randomStartingPoint(angle) {return Math.floor(Math.random() * (self.stage.width() + self.offset));}function createPositionMatrix(angle, size) {return [randomStartingPoint(angle), 0, size * 0.1, size];}function createDrop(config) {var factor = Math.random(),positionMatrix = createPositionMatrix(config.angle, config.size),drop = self.canvas.ellipse.apply(self.canvas, positionMatrix),layer = config.speed * (1 + factor),cx = positionMatrix[0] - (Math.tan(config.angle * Math.PI / 180) * self.stage.height());drop.attr({stroke: config.color, opacity: 1 - factor, fill: config.color}).rotate(config.angle).animate({cy: self.stage.height(), cx: cx}, layer, function() { drop.remove(); });return drop;}// "class" methodsself.setIntensity = function(intensity) {clearInterval(self.enginePid);self.config.intensity = intensity;self.enginePid = setInterval(function() { createDrop(self.config); }, 100 / self.config.intensity);};window.onresize = function() { self.canvas.setSize(window.innerWidth, window.innerHeight); };return self.init.apply(self, arguments);};
})(window);

js制作的模拟超逼真下雨效果相关推荐

3.8 JS 制作无间断图片循环滚动效果
制作无间断图片循环滚动效果要求图片高度,高度自行设定,要求显示n张图片(n=你的学号末位+6),例如:你的学号末位是3,那么你需要显示3+6共9张图片,9张图片循环滚动 index.html < ...
jquery php 抽奖,jquery-rotate.js制作红包大放送抽奖效果
简介现在抽奖效果在网页上已经非常常见了,以前多是 Flash 实现,但现在越来越多的使用 JavaScript 实现.两者各有优缺点,不能说哪个一定比哪个好.今天在百度糯米上看到一个"红包 ...
使用Dundas Chart控件制作一个模拟的逼真图
使用Dundas Chart 组件开发如上图,以下代码是在VS2003开发环境中运行的.在页面中加一个Dundas Chart 组件,并在Page_Load中调用SetChart1()函数即可(参数在 ...
js模拟制作超逼真的雪花效果
<春雪> 唐·东方虬春雪满空来,触处似花开. 不知园里树,若个是真梅. <红林擒近·寿词·满路花> 宋·陈允平三万六千顷,玉壶天地寒.庾岭封的皪,淇园折琅.漠漠梨花烂漫,纷 ...
苹果html5插件,纯CSS打造各种超逼真的苹果（Apple）设备模型
CSSDevices是一款使用纯CSS制作的各种超逼真的苹果(Apple)设备模型.这些CSS苹果设备模型中可以嵌入图片.文字.视频等HTML元素,并且非常容易的就可以制作出轮播图的效果. 使用方法 ...
利用HTML+css+js制作侧边栏小广告
利用HTML+css+js制作小广告 1.页面效果 2.HTML代码 3.css代码(给广告位设置样式) 4.js代码在这里插入图片描述
html 页面下雪效果,HTML5超逼真下雪场景效果
简要教程这是一款基于jquery的超逼真下雪场景特效.该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效. 使用方法在页面中引入ThreeCanva ...
教大家使用PS合成逼真的下雨效果(8)
教大家使用PS合成逼真的下雨效果(8) 教大家使用PS合成逼真的下雨效果,教程制作出来的下雨效果非常逼真,制作的难度中等,透过这个教程大家可以更好的掌握融图技术和合成时的素材处理办法,让整个画面趋近真 ...
html真实雾效果图,HTML5Canvas逼真烟雾效果js插件
简要教程 smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件.通过该js插件,可以非常轻松的在页面中制作出各种烟雾效果. 使用方法在页面中引入smoke.js文件. HTML结 ...

js制作的模拟超逼真下雨效果

js制作的模拟超逼真下雨效果相关推荐

最新文章

热门文章