这个盛夏,来一场“清凉”的代码雨!
这个夏天真的是太热了,来一场盛大的代码雨吧!
以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 定义变量
这里我们定义如下几个变量:
变量 | 意义 |
---|---|
code_rain | 画布对象 |
rain_y | 每滴代码雨的y坐标 |
columns | 每行有多少滴雨 |
font_size | 雨有多大 |
context | 上下文对象 |
初始化
具体解析看代码注释即可。
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. 结语
热。
这个盛夏,来一场“清凉”的代码雨!相关推荐
- 代码雨代码源复制_超火!黑客帝国代码雨
黑客帝国代码雨 相信看过<黑客帝国>的同学,对上面的的这个图片一定不陌生,这是一个非常经典的画面.在繁忙的工作之余,大家也要放松下自己,今天就给大家分享一下代码滚动的实现方法. 第一步,新 ...
- vbs代码炫酷效果_Python|实现黑客帝国代码雨效果
Python|实现黑客帝国代码雨效果 估计大家都看过电影<黑客帝国>吧,片中的一段代码雨片段实在是炫酷,试想一下,片中的代码雨效果在自己电脑屏幕上实现了会是一种什么样的感觉,会不会有种身临 ...
- 《黑客帝国》中的代码雨让人身临其境!利用Python轻松实现!
前言 <黑客帝国>的一段代码雨片段让外行人感觉非常震撼,但其实利用咱们的Python来做出这个效果真的很简单! 今天就带大家把这个代码雨放在自己的显示器上面,亲身体验一把黑客的感觉! 环境 ...
- python画代码雨
python实现屏幕代码雨 通过Python实现屏幕代码雨 python 版本 看不出来是2.x还是3.x的建议百度 根据情况调节屏幕大小 否则屏幕显示不下会报错 PANEL_width = 1000 ...
- 用HTML制作代码雨源码分享
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>代码 ...
- 黑客代码雨源代码_工业城黑客空间教授的东西比代码更有价值
黑客代码雨源代码 James Wallbank是英国访问空间中运行时间最长的黑客空间之一的创始人,该访问空间于2000年在北部工业城市谢菲尔德的中心开放,旨在向所有人开放. Access Space不 ...
- linux如何安装黑客帝国cmatrix代码雨效果
linux如何安装黑客帝国cmatrix代码雨效果 cmatrix常用命令 cmatrix下载:安装包 具体步骤 源码安装cmatrix 创建/usr/local/temp目录 mkdir -p /u ...
- Linux下的软件安装方式+源码安装软件cmatrix代码雨
Linux下的软件安装方式 1 rpm工具安装 2 yum工具安装 3 源码编译安装 软件包类型 1 二进制软件包(=rpm软件包) 无需编译,直接安装 根据计算机CPU架构类型和操作系统选择合适的软 ...
- 黑客帝国代码雨怎么弄?(最全,最简单,看完就会)
首先在桌面上创建一个文本文档 然后打开然后将下面的代码复制粘贴过去: <!DOCTYPE html><html> <head> <title>兴趣小组& ...
最新文章
- opencv数字图像处理(图像模糊)
- SAP SD基础知识之创建并处理外向交货单
- mybatis学习3之分页的实现
- cxgrid按条件计算合计值
- 联通培训 老师教的 bootstrap row 里面都是12行不断的分割成小格子
- 被远程机器长时间无响应 (错误码:[308])_自动折叠式“Rollbot”为完全不受束缚的软机器人铺平了道路...
- 源码 连接mysql_MySql轻松入门系列————第一站 从源码角度轻松认识mysql整体框架图...
- [css] 使用rem时应该注意什么?
- 适合新手入门的8个python项目_推荐:一个适合于Python新手的入门练手项目
- 辉瑞公司CEO:正在研发耐高温新冠疫苗
- atitit .大数据的方法,技术.attilax总结 大数据包含哪些方面 v5 s09..docx 7. 三大核心技术:拿数据,处理转换,算数据	2 8. 大数据有5个部分。数据采集,数据存储,
- 笔记软件对比之 思源笔记 VS Notion
- 搬: 含有对象成员指针的类的对象成员指针初始化问题
- 房产圈的极客---前搜房网副CTO曹艳白干了件大事!
- 【Hexo搭建个人博客】:yilia主题配置(四) - 分类管理
- 用MATLAB绘制两个圆相切,教您用几何绘图工具画三个两两相切的圆
- 深井泵房无人值守系统 泵站无人值守平台 智慧水务
- 内存颗粒位宽和容量_内存和内存颗粒是什么关系?
- 申请实用新型专利的流程
- solaris系统关闭服务器,Solaris下如何关闭SUN服务器