这个盛夏，来一场“清凉”的代码雨！

盛夏，来一场“清凉”的代码雨！"/>

这个盛夏，来一场“清凉”的代码雨！

这个夏天真的是太热了，来一场盛大的代码雨吧！
以dayu200为例，过程非常简单！

0. 效果

1. 代码实现

1.1 创建Canvas画布

• 创建一个覆盖全屏的画布，code_rain, 代码雨画布。

<div class="container"><canvas id="code_rain" style="width: 100%;height: 100%;"></canvas>
</div>

• 背景设置成黑色。

.container {display: flex;flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 100%;height: 100%;background-color: black;overflow: hidden ;
}.title {font-size: 60px;text-align: center;width: 100%;height: 40%;margin: 10px;
}@media screen and (device-type: default) and (orientation: landscape) {.title {font-size: 60px;}
}@media screen and (device-type: tablet) and (orientation: landscape) {.title {font-size: 100px;}
}

1.2 定义变量

这里我们定义如下几个变量：

初始化
具体解析看代码注释即可。

  data: {title: "",rain_y:[],font_size:16,columns:0,context:undefined,code_rain:undefined,},onInit() {//初始化字体大小this.font_size=16;//屏幕宽度/字体大小 = 列数 = 每行有多少滴雨this.columns = 1080/this.font_size;// y坐标全部初始化为1for(var i=0;i<this.columns;i++){this.rain_y[i]=1;}}

1.3 开画

具体流程看注释，窗口大小根据实际情况修改参数，效果也是。

   onShow(){// 找到之前设定的画布组件this.code_rain = this.$element("code_rain");// 获取画布上下文this.context = this.code_rain.getContext("2d");// 绘制成黑色，(r,g,b,透明度)，透明度不能为1或者0，否则要么黑屏，要么数字重叠，无法体现出渐变效果。this.context.fillStyle="rgba(0,0,0,0.1)";// 绘制已填充的画布，每次都进行刷新覆盖this.context.fillRect(0,0,1080,2340);// 设置字体颜色，经典的绿色this.context.fillStyle="green";// 设置字体大小this.context.font=this.font_size+"px";var that = this;//设置定时器，循环执行。setInterval(()=>{// 绘制成黑色，(r,g,b,透明度)，透明度不能为1或者0，否则要么黑屏，要么数字重叠，无法体现出渐变效果。that.context.fillStyle="rgba(0,0,0,0.1)";// 绘制已填充的画布，每次都进行刷新覆盖that.context.fillRect(0,0,1080,2340);// 经典的绿色字体that.context.fillStyle="green";// 字体大小that.context.font=this.font_size+"px";//一行一行绘制for(var i=0;i<this.columns;i++){//绘制字体 (数字0或者1，数字的x坐标，数字的y坐标)//x坐标跟随列数索引增加that.context.fillText(Math.floor(Math.random()*2),i*that.font_size,that.rain_y[i]*that.font_size);//超出屏幕一半 就可以开始重新绘制了，加入random判断是为了不让所有数字都从同一起点出现，保证随机生成效果。if(that.rain_y[i]*that.font_size>(2340*0.5)&&Math.random()>0.85)//满足条件则从头来过        that.rain_y[i]=0;//y坐标下移that.rain_y[i]++;}},50);},

1.4 效果

2. 加点颜色

我们可以添加一些颜色数组来动态变化数字雨的颜色，比如这里选择了一套赛博朋克的经典配色。

color:["#FF72D9D2", "#FF386FDB", "#FFC93C6D", "#FFFF0000", "#FFB4814A"]

那么，把刚刚的"green"换成随机颜色就好了。

export default {data: {title: "",rain_y:[],font_size:16,columns:0,context:undefined,code_rain:undefined,color:["#FF72D9D2", "#FF386FDB", "#FFC93C6D", "#FFFF0000", "#FFB4814A"]},onInit() {//初始化字体大小this.font_size=16;//屏幕宽度/字体大小 = 列数 = 每行有多少滴雨this.columns = 1080/this.font_size;// y坐标全部初始化为1for(var i=0;i<this.columns;i++){this.rain_y[i]=1;}},onShow(){// 找到之前设定的画布组件this.code_rain = this.$element("code_rain");// 获取画布上下文this.context = this.code_rain.getContext("2d");// 绘制成黑色，(r,g,b,透明度)，透明度不能为1或者0，否则要么黑屏，要么数字重叠，无法体现出渐变效果。this.context.fillStyle="rgba(0,0,0,0.1)";// 绘制已填充的画布，每次都进行刷新覆盖this.context.fillRect(0,0,1080,2340);// 设置字体颜色，经典的绿色this.context.fillStyle="green";// 设置字体大小this.context.font=this.font_size+"px";var that = this;setInterval(()=>{// 绘制成黑色，(r,g,b,透明度)，透明度不能为1或者0，否则要么黑屏，要么数字重叠，无法体现出渐变效果。that.context.fillStyle="rgba(0,0,0,0.1)";// 绘制已填充的画布，每次都进行刷新覆盖that.context.fillRect(0,0,1080,2340);// 随机颜色that.context.fillStyle=this.color[this.ranNum(0,4)];// 字体大小that.context.font=this.font_size+"px";//一行一行绘制for(var i=0;i<this.columns;i++){//绘制字体 (数字0或者1，数字的x坐标，数字的y坐标)//x坐标跟随列数索引增加that.context.fillText(Math.floor(Math.random()*2),i*that.font_size,that.rain_y[i]*that.font_size);//超出屏幕一半 就可以开始重新绘制了，加入random判断是为了不让所有数字都从同一起点出现，保证随机生成效果。if(that.rain_y[i]*that.font_size>(2340*0.5)&&Math.random()>0.85)//满足条件则从头来过that.rain_y[i]=0;//y坐标下移that.rain_y[i]++;}},50);},ranNum(minNum,maxNum){switch(arguments.length){case 1:return parseInt(Math.random()*minNum+1,10);break;case 2:return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);break;default:return 0;break;}},}

2.1 效果

3. 结语

热。