typescript实现代码雨

最新推荐文章于 2024-01-23 08:08:55 发布

零OO

最新推荐文章于 2024-01-23 08:08:55 发布

阅读量100

点赞数

分类专栏： typescript 前端文章标签： typescript 前端

本文链接：https://blog.csdn.net/qq_39111074/article/details/132018396

版权

前端同时被 2 个专栏收录

220 篇文章 7 订阅

订阅专栏

typescript

8 篇文章 0 订阅

订阅专栏

代码雨效果：
在这里插入图片描述
实现方法：
①创建一个文件夹，存放项目，eg: “rainTS” ，依次创建 “tsconfig.json”、 “index.ts” 、 “index.html”

“tsconfig.json” 创建方法：“tsc --init”
创建 “index.ts” 文件后，可以使用 “tsc -w” 命令，开启 ts 文件监听，将 ts 文件生成对应的 js 文件：“index.ts”–》“index.js”，开启监听后不要关闭该命令窗口，后面再改动 ts 文件后，都会及时生成对应最新的 js 文件

项目结构如下：
在这里插入图片描述

②修改 “tsconfig.json” 文件配置
根据需要修改 “target”、“lib” 配置
在这里插入图片描述

③编辑 “index.html” 文件
添加 canvas 标签，给其添加 id 属性，方便获取元素节点对其进行画图操作

代码示例：

<!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>代码雨</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="./index.js"></script>
</body>
</html>

④ 编辑 “index.ts” 文件
a.获取canvas元素，创建 2d 绘图渲染对象，将浏览器窗口的宽和高作为绘图的宽高
b.创建一个字符串数组，用来存放要显示的代码雨内容，也可以存放其他数据
c.创建一个数字数组，用于存放代码雨数据的初始位置，我这里是从上到下，初始位置都是用 “0” ，给每个元素留了 10像素位置
d.创建一个函数，用于控制元素的位置移动
e.创建循环定时器，有规律的重复执行移动函数，让元素移动起来，形成下雨效果

代码示例：

let canvas:HTMLCanvasElement = document.querySelector('canvas') as HTMLCanvasElement
let ctx = canvas.getContext('2d')
canvas.width = screen.availWidth
canvas.height = screen.availHeight

let str:string[] = 'todayisagoodday!'.split('')
let Arr:number[] = Array(Math.ceil(canvas.width / 10)).fill(0)
console.log(Arr);

const rain = () => {
  ctx!.fillStyle = 'rgba(0,0,0,.05)'
  ctx?.fillRect(0, 0, canvas.width, canvas.height)
  ctx!.fillStyle = 'gold'
  Arr.forEach((item, index) => {
    ctx?.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10)
    Arr[index] = item > canvas.height || item > 10000 * Math.random() ? 0 : item + 10
  })
}

setInterval(rain, 40)