# code-rain

**Repository Path**: lsk_ciao/code-rain

## Basic Information

- **Project Name**: code-rain
- **Description**: #使用 canvas 实现的代码雨效果
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: https://lsk_ciao.gitee.io/code-rain
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-18
- **Last Updated**: 2024-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CODE RAIN
通过 canvas 实现的代码雨效果。 实现思路：首先使canvas铺满整个屏幕，写一个绘制函数，每次绘制一个随机字体颜色的字符串，通过字体大小来得到下次绘制的字体位置，开启定时器调用整个绘制函数。

实现步骤：
 1. 页面创建一个 canvas 元素， 使 canvas 元素充满整个屏幕
 2. 写一个获取随机指定返回的随机数函数，写一个获取随机字符串的函数，一个获取随机获取颜色的函数。
 3. 创建一个记录变量：
    1. 创建字体大小变量， 值为20；
    2. 创建宽高变量，值为屏幕宽高值；
    3. 创建一个列总数变量，值为宽/字体大小；
    4. 根据列总数变量创建一个填充0的数组，长度为列总数，用于记录每列绘制到第几行；
 4. 实现绘制函数，每次绘制一行，循环列数组，每次循环中设置字体颜色和要绘制的字符串，坐标则是{ x: 字体大小 * 下标，y：（当前行的值 + 1） * 下标 }， 如果 y 坐标超过高度且随机数大于0.5， 那么就给当前列的行赋值为0，添加随机数大于0.5是为了形成层次。
 5. 在调用之前还需要模糊之前行的内容，在绘制函数循环开始之前，设置一个矩形从（0， 0 宽，高）开始覆盖， 颜色浅一点即可。