正文 

当前位置： 首页 > 技术 > java教程

#夏日挑战赛#ffh这个盛夏，来一场“清凉”的代码雨！(代码片段)

开源基础软件社区官方 开源基础软件社区官方     2022-11-29     432

关键词：

[本文正在参加星光计划3.0-夏日挑战赛]

.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 | 上下文对象 |

**初始化** 
具体解析看代码注释即可。
```javascript
  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坐标全部初始化为1
        for(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坐标全部初始化为1
        for(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. 结语

热。

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com/#bkwz

#夏日挑战赛#ffh实时聊天室之websocket实战(代码片段)

本文正在参加星光计划3.0–夏日挑战赛@TOC前言如果要实现像微信聊天一样的功能，在组网内进行通信显然是不够的，所以软总线并不作用与这种远距离传输。如果我们要完成微信的聊天功能，传统的方法就是利用webSocket借助服... 查看详情

#夏日挑战赛#ffh从零开始的鸿蒙机器学习之旅-nlp情感分析(代码片段)

[本文正在参加星光计划3.0-夏日挑战赛]1.2导入StandfordCoreNLP库1.2.1我们可以在官网下载工具包StandfordCoreNLP1.2.2解压，并引入lib中右键文件夹，点击addaslibrary2.情感分析2.1新建JAVA类，NLP_EMOTIONpackagecom.example.nlpdemo.utils;importedu.stanford.nlp... 查看详情

#夏日挑战赛#harmonyos-实现签名功能(代码片段)

作者：范颖本文正在参加星光计划3.0–夏日挑战赛前言我刚接触HarmonyOS不久，接触到了很多不一样的东西。虽然遇到了很多问题，但学习本来就不是一蹴而就的，所以我决定从简单到复杂，所以这次我分享一个用canvas实现的签字... 查看详情

#夏日挑战赛#ffhai作诗之httprequest实战(代码片段)

本文正在参加星光计划3.0–夏日挑战赛@TOC前言​最近在一个网课上看到了一个AI作诗的接口，因为之前的fetch接口已经不再维护了，所以我就借这个机会想试试鸿蒙的http接口。接下来会重新复习一下http请求的一些基本知识，并... 查看详情

#夏日挑战赛#harmonyos-实现带日期效果的待办事项(代码片段)

作者：俞才彬本文正在参加星光计划3.0–夏日挑战赛前言初学鸿蒙JS开发技术不久，想要快速结合官方文档上手鸿蒙JS组件开发，本文主要结合HarmonyOS官网上的相关组件及API实现一个根据日期持久化存储待办事项。效果演示实现... 查看详情

#夏日挑战赛#harmonyoscanvas实现时钟(代码片段)

作者：郑瑶本文正在参加星光计划3.0–夏日挑战赛前言最近在学习HarmonyOS相关的东西，看了很多网上的canvas实现时钟，现在我也来写一个关于HarmonyOS的时钟吧。项目说明工具版本：DevEcoStudio3.0Beta3SDK版本；3.1.5.5主要用到知识：can... 查看详情

#夏日挑战赛#harmonyos-实现消息通知功能(代码片段)

作者：张明伟本文正在参加星光计划3.0–夏日挑战赛前言通知是手机软件的消息推送，一般需要设置通知的权限为允许通知才能在状态栏查看到通知。主要有以下使用场景：app内的通知：如微信新消息的提醒，以及一些APP广告的... 查看详情

#夏日挑战赛#鸿蒙fa开发之jsui与javaui相互跳转实例(代码片段)

本文正在参加星光计划3.0–夏日挑战赛需求背景说明鸿蒙官方推荐使用Js或eTS方式来开发APP应用UI，但在开发过程中有可能会遇到JSUI无法实现的功能，例如地图导航、定制化视频播放器，那么这种场景下如何实现功能，这个需求... 查看详情

#夏日挑战赛#openharmonyhisysevent打点调用实践(l2)(代码片段)

「本文正在参加星光计划3.0--夏日挑战赛」@toc简介设备开发，通常的问题分析主要靠日志记录，Openharmony的日志记录分很多种，我们用的最多的是Hilog。此文章以openharmony3.1代码基础,介绍另外一种记录:事件打点(HiSysEvent)。打点源... 查看详情

#夏日挑战赛#harmonyos实现一个绘画板(代码片段)

本文正在参加星光计划3.0–夏日挑战赛前言本篇还是canvas内容，实现的是一个绘画板，本次绘画板的功能比较多一些，包括画笔颜色切换、清空、橡皮擦、保存、撤回、反撤回。可以用该绘画板来完成一些基础的绘画功能。介绍... 查看详情

#夏日挑战赛#openharmony基于js实现的贪吃蛇(代码片段)

本文正在参加星光计划3.0–夏日挑战赛前言不知道干啥，那就敲代码吧，写个贪吃蛇，很显然，被自己菜哭了，自己写的贪吃蛇自己都不会玩（ps:我曾经可是在不会死亡的情况下完了好长时间>_<)实现效果如下：:::hljs-center:::... 查看详情

#夏日挑战赛#ffhharmonyos手机遥控dayu开发板相机(代码片段)

[本文正在参加星光计划3.0-夏日挑战赛]参数类型描述qualitystring图片质量：high，normal，lowsuccessFunction接口调用成功的回调函数failFunction接口调用失败的回调函数completeFunction接口调用结束的回调函数2.案例编写关于手机侧，开发板... 查看详情

#夏日挑战赛#harmonyos实现一个手绘板(代码片段)

本文正在参加星光计划3.0–夏日挑战赛前言最近在学习openHarmony，恰好之前了解过canvas，所以本篇文章分享一下我实现的一个手绘板，利用openHarmony内置的APIcnavas组件实现。介绍这是一个手绘板，并且可以根据滑动屏幕速度，动... 查看详情

#夏日挑战赛#用openharmonyets实现一个huaweiapp标准布局(代码片段)

...S实现一个Huaweiapp标准布局本文正在参加星光计划3.0--夏日挑战赛@TOC1.介绍Huawei的app，我们都能看得出来是用心设计过的，值得学习。如果我们仔细去看Huawei手机自带的app，我们会发现所有的app，无论是什么类型的app，其布局结构... 查看详情

#夏日挑战赛#ohos构建自定义服务实战(代码片段)

本文正在参加星光计划3.0–夏日挑战赛作者：曹昌言​在面向全场景、全连接、全智能时代背景下，OpenHarmony必然会受到越来越多开发者的支持，在不同场景下，会根据实际需求裁剪某些非必要的子系统或组件，也会增加新的子... 查看详情

#夏日挑战赛#harmonyos实现一个滑块验证(代码片段)

本文正在参加星光计划3.0–夏日挑战赛前言日常我们经常能见到验证码，网站上的验证码的作用是保护网站安全，一般网站都要通过验证码来防止机器大规模注册等危害。一般验证码有：图像验证、算数验证、滑动验证等。有些... 查看详情

#夏日挑战赛#带你玩转harmonyos多端钢琴演奏(代码片段)

本文正在参加星光计划3.0—夏日挑战赛前言想弹出悦耳的曲子奈何没有钢琴，代码来实现你的演奏愿望，软通动力程序小哥手把手带你编码造钢琴，用手机弹出你想要的曲子，多个手机同时演奏都不是问题。项目介绍本项目主要... 查看详情

#夏日挑战赛#harmonyos-方舟开发框架arkui流光按钮效果(代码片段)

作者：汤志威本文正在参加星光计划3.0–夏日挑战赛前言最近看到很多按钮加边流动效果，今天我们用HarmonyOS来实现一下。实现效果对自定义的按钮添加动态样式，实现动态效果，并且通过这种实现的思路还可以更改div的样式，... 查看详情