canvas实现下雨、下雪特效

昨天下午，学弟突然发过来一个视频，问我怎么实现这样的特效（emmm，不知道咋上传视频，就录个gif吧）

效果也比较简单，于是就自己着手用canvas实现一下。

实现思路

首先，我们需要设计一下小球对象的数据结构，小球的半径设置为r，颜色设置为color，由于其位置是不断移动的，必须要有x和y坐标。其次，小球可以左移，也可以右移，说明小球要有速度vx和vy。最后小球点击可以停止或者继续移动，需要添加一个属性isMoving来记录当前状态。如下：

  x: x轴坐标
  y: y轴坐标
  r: 半径
  vx: x的速度
  vy: y的速度
  color： 颜色
  isMoving: 记录

小球出现

canvas实现这样的特效其实还是比较简单的，绘制图形或者添加文字都有专门的api，很是方便。canvas学习–文本操作 - 掘金 (juejin.cn)和canvas学习–曲线图形 - 掘金 (juejin.cn)这两篇文章是我之前写的学习文章，感兴趣的掘友可以查看。

    let width = 600;
    let height = 600;

    window.onload = function () {
   
        //写逻辑
        let canvas = document.getElementById('canvas');
        let cxt = canvas.getContext('2d');

        canvas.width = width;
        canvas.height = height;

        let ballCount = 1;  // 小球数量
        let balls = [];   // 存储小球的数组
        let colorArr = ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'purple'];   //小球颜色
        let radius = Math.floor(Math.random() * 10) + 10;

        for (let i = 0; i < ballCount; i++) {
   
            balls.push({
   
                x: Math.floor(Math.random() * (width - radius - width / 3)) + width / 3,  // 小球的x坐标
                y: height - radius,   // 小球的y坐标
                r: radius,     // 小球半径
                vx: Math.floor(Math.random() * 2) - 2,   // 水平偏移量
                vy: Math.floor(Math.random() * 2) + 2,   // 垂直偏移量
                color: colorArr[Math.floor(Math.random() * 7)],
                isMoving: false,   // 小球的状态，false代表移动，true代表停止
            })
        }

        function drawBall() {
       // 绘制小球
            cxt.clearRect(0, 0, width, height);  // 清除画布

            for (let i = 0; i < ballCount; i++) {
   
                cxt.beginPath();

                let text = "Rust";
                let len = cxt.measureText(text).width;

                let ball = balls[i];
                cxt.moveTo(ball.x, ball.y);

                cxt.fillStyle = ball['color'];

                cxt.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2, true);
                cxt.fill();

                cxt.font = "bold 15px 楷体";
                cxt.fillStyle = '#000';
                cxt.fillText(text, ball.x - len / 2, ball.y);

                cxt.closePath();

            }


        }

        drawBall();
      
       
    }

小球上浮

小球上浮的话，其实就是x和y坐标的不断变化，我们只需要遍历存储小球的数组，调整x和y就行，这里需要开启一个定时线程。

      function moveBall() {
       // 移动小球

            for (let i = 0; i < ballCount; i++) {
   
                let ball = balls[i];

                if (!ball.isMoving)