JS使用canvas实现(下雨天)特效-阿里云开发者社区

JS使用canvas实现(下雨天)特效

2022-09-21 27

简介： 今天利用canvas实现一个简单的下雨天的网页案例！

+关注继续查看

设置canvas标签的id为cavs，方便css添加样式

<canvas id="cavs" width="500" height="500"></canvas>

初始化页面格式，设置画布背景

<style>
  * {
    padding: 0;
    margin: 0;
  }
  #cavs {
    background: black;
  }
  body {
    overflow: hidden;
  }
</style>

通过获取DOM元素获得画板，并设置宽高填满网页

var cavs = document.getElementById("cavs"); //获得了这个画板
var ctx = cavs.getContext("2d"); //画笔  ‘3d’   --- webgl  --- threejs
 
var w = (cavs.width = window.innerWidth);
var h = (cavs.height = window.innerHeight);
 
window.onresize = function () {
  var w = (cavs.width = window.innerWidth);
  var h = (cavs.height = window.innerHeight);
};

设置雨滴数量并定义雨滴数组

var cont = 30;
var RainArr = [];

构造下雨函数开始

1.设置位置坐标

function Rain() {
  //构造函数
}
 
Rain.prototype = {
  init: function () {
    this.x = random(1, w); //随机坐标x
    this.y = 0; // 坐标y
    this.r = 1;
    this.ySpeed = random(4, 7);
    this.rSpeed = 1;
    this.t = 1; //透明度
    this.ts = 0.96; //透明度的系数
    this.l = random(h * 0.8, h * 0.9); //落地的高度
    this.maxR = 50;
  },
}；

2.设置下落溅起圆的半径和颜色

draw: function () {
  if (this.y > this.l) {
    ctx.beginPath(); //开启一个路径
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    //  圆心 x ,y ,半径，起始角度，Π，false顺时针，true逆时针
    ctx.strokeStyle = "rgba(0,255,255," + this.t + ")";
    ctx.closePath(); //闭合一个路径
    ctx.stroke(); //开始描边绘制
  } else {
    ctx.beginPath(); //开启一个路径
    ctx.fillStyle = colorRandom();//随机颜色
    ctx.fillRect(this.x, this.y, 2, 10);
    //      矩形  x  y  w  h
    ctx.closePath(); //闭合一个路径
  }
 
  this.update(); //坐标更新
},
update: function () {
  if (this.y > this.l) {
    //画圆
    //   return;
    // init.draw_arc();
    if (this.t > 0.03) {
      this.r += this.rSpeed; //半径不断增大
      if (this.r > this.maxR) {
        this.t *= this.ts; //透明度变小
        // console.log(init.t);
      }
    } else {
        
    //   return;//雨停了
    this.init(); //重新来过，初始化
    }
  } else {
    this.y += this.ySpeed;
    // this.draw_rect();
  }
},

3.设置随机数和运动方式

function move() {
  //  添加一个大蒙层
  ctx.beginPath(); //开启一个路径
  ctx.fillStyle = "rgba(0,0,0,0.1)";
  ctx.fillRect(0, 0, w, h);
  //      矩形  x  y  w  h
  ctx.closePath(); //闭合一个路径
 
  for(var i = 0;i<RainArr.length;i++){
      RainArr[i].draw();
  }
  
  window.requestAnimationFrame(move);
}
move();

4.设置随机颜色

function colorRandom(){
    var r = Math.floor(Math.random()*255);
    var g = Math.floor(Math.random()*255);
    var b = Math.floor(Math.random()*255);
    return "rgba("+ r +","+ g +","+ b +")";
}

原整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #cavs {
        background: black;
      }
      body {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="cavs" width="500" height="500"></canvas>
    <script>
      var cavs = document.getElementById("cavs"); //获得了这个画板
      var ctx = cavs.getContext("2d"); //画笔  ‘3d’   --- webgl  --- threejs
 
      var w = (cavs.width = window.innerWidth);
      var h = (cavs.height = window.innerHeight);
 
      window.onresize = function () {
        var w = (cavs.width = window.innerWidth);
        var h = (cavs.height = window.innerHeight);
      };
var cont = 30; //雨滴的最大数
var RainArr = []; // 装雨滴的数组
      //开始
 
      function Rain() {
        //构造函数
      }
 
      Rain.prototype = {
        init: function () {
          this.x = random(1, w); //随机坐标x
          this.y = 0; // 坐标y
          this.r = 1;
          this.ySpeed = random(4, 7);
          this.rSpeed = 1;
          this.t = 1; //透明度
          this.ts = 0.96; //透明度的系数
          this.l = random(h * 0.8, h * 0.9); //落地的高度
          this.maxR = 50;
        },
        draw: function () {
          if (this.y > this.l) {
            ctx.beginPath(); //开启一个路径
            ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
            //  圆心 x ,y ,半径，起始角度，Π，false顺时针，true逆时针
            ctx.strokeStyle = "rgba(0,255,255," + this.t + ")";
            ctx.closePath(); //闭合一个路径
            ctx.stroke(); //开始描边绘制
          } else {
            ctx.beginPath(); //开启一个路径
            ctx.fillStyle = colorRandom();//随机颜色
            ctx.fillRect(this.x, this.y, 2, 10);
            //      矩形  x  y  w  h
            ctx.closePath(); //闭合一个路径
          }
 
          this.update(); //坐标更新
        },
        update: function () {
          if (this.y > this.l) {
            //画圆
            //   return;
            // init.draw_arc();
            if (this.t > 0.03) {
              this.r += this.rSpeed; //半径不断增大
              if (this.r > this.maxR) {
                this.t *= this.ts; //透明度变小
                // console.log(init.t);
              }
            } else {
                
            //   return;//雨停了
            this.init(); //重新来过，初始化
            }
          } else {
            this.y += this.ySpeed;
            // this.draw_rect();
          }
        },
      };
 
      //随机数的函数
      function random(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      }
 
      var one = new Rain();
      one.init(); //初始化一下
      // 产生多个雨滴
      function createRain() {
        for (var i = 0; i < cont; i++) {
          (function (j) {
            setTimeout(function () {
              var rain = new Rain();
              rain.init();
              RainArr.push(rain);
            }, j * 200);
          })(i);
        }
      }
      createRain();
      //运动
      function move() {
        //  添加一个大蒙层
        ctx.beginPath(); //开启一个路径
        ctx.fillStyle = "rgba(0,0,0,0.1)";
        ctx.fillRect(0, 0, w, h);
        //      矩形  x  y  w  h
        ctx.closePath(); //闭合一个路径
 
        for(var i = 0;i<RainArr.length;i++){
            RainArr[i].draw();
        }
        
        window.requestAnimationFrame(move);
      }
      move();
      //随机颜色
      function colorRandom(){
          var r = Math.floor(Math.random()*255);
          var g = Math.floor(Math.random()*255);
          var b = Math.floor(Math.random()*255);
          return "rgba("+ r +","+ g +","+ b +")";
      }
    </script>
  </body>
</html>

实现效果

图片.png