canvas画雨滴下落

D__W

已于 2022-10-16 20:43:24 修改

阅读量172

点赞数

分类专栏： canvas 文章标签：前端 javascript 学习

于 2022-07-01 09:49:51 首次发布

原文链接：http://m.studyofnet.com/news/5662.html

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>
</head>

<body>
    <canvas id="canvas"></canvas>

    <script>
        var canvas = document.getElementById('canvas')
        var ctx = canvas.getContext('2d')

        var cw = canvas.width = window.innerWidth
        var ch = canvas.height = window.innerHeight
        var rainArr = []

        function random (min, max) {
            return Math.random() * (max - min) + min
        }

        class Rain {
            init () {
                this.x = random(0, cw);// 初始的x,y值
                this.y = 0;
                this.my = random(0.8 * ch, 0.9 * ch)
                this.speed = random(4, 5);// 雨点下落速度
                this.r = 1;//初始的圆半径
                this.sr = 1;// 圆增长半径的速度
            }
            draw () {
                if (this.y < this.my) {
                    ctx.beginPath();
                    ctx.fillStyle = 'white'
                    ctx.fillRect(this.x, this.y, 4, 10)
                } else {
                    ctx.beginPath();
                    ctx.strokeStyle = 'white'
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
                    ctx.stroke();
                }
            }
            move () {
                if (this.y < this.my) {
                    this.y += this.speed
                } else {
                    // 到最底部了，就开始画圆
                    if (this.r < 70) {
                        this.r += this.sr
                    } else {
                        // 到最底部了，恢复到初始状态
                        this.init()
                    }
                }
                this.draw()
            }
        }

        function createRain (num) {
            for (var i = 0; i < num; i++) {
                // 这样就不会用时生成
                setTimeout(() => {
                    var rain = new Rain();
                    rain.init();
                    rain.draw();
                    rainArr.push(rain)
                }, 300 * i)
            }
        }
        createRain(60)
        setInterval(() => {
            ctx.beginPath();
            ctx.fillStyle = 'rgba(0,0,0,0.05)'
            ctx.fillRect(0, 0, cw, ch)
            for (var item of rainArr) {
                item.move()
            }
        }, 1000 / 80)

        // 监听屏幕大小，屏幕发生变化让画布也跟着改变大小
        window.onresize = function () {
            ch = canvas.height = window.innerHeight
            cw = canvas.width = window.innerWidth
        }
    </script>
</body>

</html>

从下往上。。。。

<!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>
</head>

<body>
  <canvas id="canvas"></canvas>

  <script>
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')

    var cw = canvas.width = window.innerWidth
    var ch = canvas.height = window.innerHeight
    var rainArr = []

    function random(min, max) {
      return Math.random() * (max - min) + min
    }

    class Rain {
      init() {
        this.x = random(0, cw);// 初始的x,y值 ,起点位置
        this.y = ch * 0.9;
        this.my = random(0.1 * ch, 0.2 * ch)
        this.speed = random(4, 5);// 雨点下落速度
        this.r = 1;//初始的圆半径
        this.sr = 1;// 圆增长半径的速度
      }
      draw() {
        if (this.y > this.my) {
          ctx.beginPath();
          ctx.fillStyle = 'white'
          ctx.fillRect(this.x, this.y, 4, 10)
        } else {
          ctx.beginPath();
          ctx.strokeStyle = 'white'
          ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
          ctx.stroke();
        }
      }
      move() {
        if (this.y > this.my) {
          this.y -= this.speed
        } else {
          // 到最上面了，就开始画圆
          if (this.r < 70) {
            this.r += this.sr
          } else {
            // 画完圆，恢复到初始状态
            this.init()
          }
        }
        this.draw()
      }
    }

    function createRain(num) {
      for (var i = 0; i < num; i++) {
        // 这样就不会用时生成
        setTimeout(() => {
          var rain = new Rain();
          rain.init();
          rain.draw();
          rainArr.push(rain)
        }, 300 * i)
      }
    }
    createRain(60)
    setInterval(() => {
      ctx.beginPath();
      ctx.fillStyle = 'rgba(0,0,0,0.05)'
      ctx.fillRect(0, 0, cw, ch)
      for (var item of rainArr) {
        item.move()
      }
    }, 1000 / 80)

    // 监听屏幕大小，屏幕发生变化让画布也跟着改变大小
    window.onresize = function () {
      ch = canvas.height = window.innerHeight
      cw = canvas.width = window.innerWidth
    }
    canvas.rotate(Math.PI/2)
  </script>
</body>

</html>