canvas实现代码雨效果

运行环境是vite+vue3+ts

但是写的还是js的内容

代码雨

1.在template中写canvas,canvas在我的理解里是个画板

<template>
  <div>
    <canvas></canvas>
  </div>
</template>

2.在script中编写方法,这里是vue3的话注意号好生命周期,要在可以操作以后使用

<script setup lang="ts">


//代码雨

//1.去html里面写canvas 2.获取到canvas  3.canvas为2d  4.给canvas的宽高赋值 5.自定义一个数组
//6.定义一个array去存储，每10px一个字母  7.写一个生成代码雨的方法 写一个定时器不断调用
//8.代码雨的方法先给canvas写个背景色 ， 文字颜色  ， 定义画布的宽高  之前canvas相当是一个画板
//9.ctx.filltext 去给画布填充文字  随机文字 filltext方法它是文字，x轴，y轴

onMounted(() => {
    getrain()
    

});

const getrain = ()=>{
    
  let canvas= document.querySelector("canvas");

let ctx = canvas.getContext("2d");
canvas.width = screen.availWidth;
canvas.height = screen.availHeight;
let str = 'yjhxzygpldnpy'.split('')
let arr  = Array(Math.ceil(canvas.width/10)).fill(0)



setInterval(()=>{
     //背景色
  ctx.fillStyle = 'rgba(0,0,0,0.05)'
   //画布大小 占满  四个值分别是（距离画板x的距离，距离画板y轴的距离，画布的宽度，画布的长度）
   ctx.fillRect(0,0,canvas.width,canvas.height)
  //文字颜色
  ctx.fillStyle = "#0f0";
 
  //来给我们定义的画布来填充文字
  arr.forEach((item,index)=>{
      //每个填充的文字随机
 
      ctx.fillText(str[Math.floor(Math.random() * str.length)],index * 10,item+10)
      //对 item下手  如果 item
      arr[index] = item > canvas.height || item > 10000 * Math.random() ? 0 : item + 10
  })

},40)
 





}



</script>