Canvas实现数字雨和放大镜效果

前言

之前在学习的时候没有了解过Canvas的使用，趁着有空来学习一下Canvas，顺便实现两个简单的效果，数字雨和放大镜效果。后面有完整代码。

正文

还是先来看看效果

• 数字雨

• 放大镜

数字雨

我认为数字雨的核心在于单条数字雨生成和数字雨移动

事前先准备几个函数，方便我们的操作，随机数可以用来生成数字雨的坐标，文字的大小以及移动的速度。

  /** 生成随机数*/
  const createRandomNum = useCallback((min: number, max: number) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }, [])
  
  
  /**
  * @description 创建01字符串
  * @returns 01字符串
  */
  function generateRandomString() {
    const characters = '01';
    const len = Math.floor(Math.random() * (60 - 45 + 1)) + 45;
    let randomString = '';

    for (let i = 0; i < len; i++) {
      const randomIndex = Math.floor(Math.random() * characters.length);
      randomString += characters[randomIndex];
    }
    return randomString;
  }

生成单条数字雨

单条的样式就出来了 由于我们接下来要对它进行移动，那我们必须记录数字雨的相关信息，然后对坐标进行修改，最后再绘制就可以了。

interface List {
  x: number,
  y: number,
  text: string,
  fontSize: number,
  width: number,
  speed: number,
}

在我们每生成一条数字雨时就去记录对应数据 再结合requestAnimationFrame，我们的动画效果就出来了

放大镜

放大镜比数字雨还简单，一共就两步，获取有效的鼠标坐标和drawImage切图并绘制

代码

仓库地址

结语

分享结束