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

最新推荐文章于 2024-10-18 11:12:30 发布

2401_87034174

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量438

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_87034174/article/details/142115166

版权

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 +")";

}




 ![](https://img-blog.csdnimg.cn/c016115f9d1348ce9722972afa6deeec.gif)



 原整代码

<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>

<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() {