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

最新推荐文章于 2025-03-19 02:20:29 发布

空中湖

最新推荐文章于 2025-03-19 02:20:29 发布

阅读量618

点赞数 1

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kongzhonghu/article/details/126616800

版权

js 专栏收录该内容

50 篇文章

订阅专栏

一层秋雨一层凉。

小楼一夜听春雨。

虞美人·听雨

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

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

我是那迷恋微雨的过客。想着用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" methods
    self.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);