开发者社区> 亦世凡华、> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 今天利用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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS案例:支持PC端和Mobile端的Canvas电子签名功能
JS案例:支持PC端和Mobile端的Canvas电子签名功能
0 0
JavaScript之canvas初使用
JavaScript之canvas初使用
0 0
酷炫一款动态背景+鼠标点击效果(HTML +js canvas)
前言 之前用于装饰个人的Hexo博客背景和点击事件,于是动手弄弄顺便学习学习,现在分享出来给有需要的人。 废话不多说 ,分享一款酷炫的页面动态背景 效果见( https://fivecc.cn )
0 0
h5逐步实现 <<canvas系统>>(html逻辑 css逻辑 js逻辑)
h5逐步实现 <<canvas系统>>(html逻辑 css逻辑 js逻辑)
0 0
js 调用本地摄像头通过canvas进行截图
如何通过js调用本地摄像头呢?获取后如何对视频进行截图呢?在这里跟大家做一个简易的Demo来实现以上几个功能。
0 0
《JS原理、方法与实践》- canvas游戏
《JS原理、方法与实践》- canvas游戏
0 0
《JS原理、方法与实践》- canvas动画
《JS原理、方法与实践》- canvas动画
0 0
《JS原理、方法与实践》- canvas作图基础
《JS原理、方法与实践》- canvas作图基础
0 0
《JS原理、方法与实践》- canvas作图(八)- 阴影
《JS原理、方法与实践》- canvas作图(八)- 阴影
0 0
+关注
亦世凡华、
在校大学生,涉及前端开发,Python,java,web安全相关爱好,努力成为一名优质的阿里云原创作者
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载