【技术实现步骤摘要】
本申请涉及页面显示，提供一种流星雨页面生成方法、装置、设备及存储介质。
技术介绍
1、在现有技术中，当需要渲染页面时，常采用修改上几行的文字的透明度，并根据距离该行的位置远近来修改不同的值，或者设置对应的时间对上级行的文字进行删除，以达到在显示新的文字时旧文字的消失。然而，采用“修改文字透明度”的方式使得调用流程过于复杂，而且内置的逻辑也很冗余。此外，采用“删除文字”的方式也易导致过渡不够平滑，有撕裂感。
2、因此，如何通过简单的逻辑方式来实现文字隐藏是目前亟待解决的问题。
技术实现思路
1、本申请实施例提供一种流星雨页面生成方法、装置、设备及存储介质，用于解决现有技术中文字隐藏方法过于复杂或过渡不够平滑的问题。
2、一方面，提供一种流星雨页面生成方法，应用于javascript语言编写环境，所述方法包括：
3、对盒模型进行初始化，获得初始化后的盒模型；
4、在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数；
5、根据所述初始化后的盒模型和所述添加后的绘制函数，生成所述流星雨页面。
6、本申请的有益效果为：由于是通过添加了透明遮罩层信息的绘制函数，来生成流星雨页面，因此，相比于现有技术中要通过“删除文字或修改文字透明度”来实现文字隐藏，本申请通过添加透明遮罩层这种简单的逻辑方式来实现对文字进行隐藏，即，通过较小的逻辑实现逐渐淡化前几行文字的效果，进而，不仅避免了多余的删除或修改函数的操作，加快了文字隐藏效率
7、在一种实现方式中，所述对盒模型进行初始化，获得初始化后的盒模型的步骤，包括：
8、在所述盒模型中，对所述流星雨页面的宽度、高度和颜色进行设置。
9、本申请的有益效果为：由于是在盒模型中，来对流星雨页面的宽度、高度和颜色进行设置，因此，可以大大简化流星雨页面布局的工作，以及对元素的相对定位和排版。
10、在一种实现方式中，所述对盒模型进行初始化，获得初始化后的盒模型的步骤，包括：
11、通过fontsize函数，在所述盒模型中，对所述流星雨页面中的文字大小进行设置。
12、本申请的有益效果为：由于是通过fontsize函数，来在盒模型中，对流星雨页面中的文字大小进行设置，因此，不仅可以便于实现文字大小的调整，还可以提高流星雨页面的视觉效果。
13、在一种实现方式中，所述对盒模型进行初始化，获得初始化后的盒模型的步骤，包括：
14、通过clos函数、math.floor函数、所述流星雨页面的宽度和fontsize函数，在所述盒模型中，确定每一行的文字数量；
15、通过drop函数，在所述盒模型中，创建drop数组；
16、通过str函数，在所述盒模型中，定义一个用于进行流星雨随机展示的字符串。
17、本申请的有益效果为：由于是通过drop函数，来创建数组，因此，可以大大便于从每一行文字的开头或末尾隐藏一定数量的文字。此外，由于是通过str函数，来在盒模型中，定义一个用于进行流星雨随机展示的字符串，因此，可以大大便于数据的存储和处理。
18、在一种实现方式中，所述在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数的步骤，包括：
19、通过ctx.fillrect函数，在绘制函数draw string中，绘制一个矩形；其中，所述矩形为所述透明遮罩层的形状；
20、通过ctx.fillstyle函数，在绘制函数draw string中，给所述矩形设置填充色。
21、本申请的有益效果为：由于是通过ctx.fillrect函数，来绘制形状为矩形的透明遮罩层，因此，可以较为简单、快速的形成透明遮罩层。此外，由于还通过ctx.fillstyle函数，来对矩形透明遮罩层设置填充与着色，因此，可以进一步提高透明遮罩层对文字的隐藏效果。
22、在一种实现方式中，所述在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数的步骤，包括：
23、通过ctx.font函数，在绘制函数draw string中，添加文字样式；
24、通过ctx.fillstyle函数，在绘制函数draw string中，设置文字颜色。
25、本申请的有益效果为：由于是通过ctx.font函数和ctx.fillstyle函数，来添加文字样式，并，对文字颜色进行设置，因此，可以进一步提高透明遮罩层对文字的隐藏效果。
26、在一种实现方式中，所述在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数的步骤，包括：
27、通过for循环函数，在绘制函数draw string中，循环生成文字；其中，每调用一次绘制函数draw string，对应生成一行新文字。
28、本申请的有益效果为：由于是通过for循环函数，来循环生成文字，因此，可以对整个流星雨页面进行处理，大大提升的流星雨页面的显示效果。
29、在一种实现方式中，所述通过for循环函数，在绘制函数draw string中，循环生成文字的步骤，包括：
30、通过clos函数，在所述for循环中，计算每一行的文字字数；
31、通过var函数、fontsize函数以及drop数组，在所述for循环中，计算生成文字的坐标；其中，所述drop数组初始化为全0。
32、本申请的有益效果为：由于在循环生成文字时，还会计算每一行的文字的字数以及坐标，因此，可以更加仔细对整个流星雨页面进行处理，以进一步提升的流星雨页面的显示效果。
33、在一种实现方式中，在通过var函数、fontsize函数以及drop数组，在所述for循环中，计算生成文字的坐标之后，所述方法还包括：
34、随机对所述drop数组中的部分值赋为0；其中，所述部分值赋为0的列在最初渲染之后，通过ctx.filltext函数随机得到str字符串中的一个字符进行文字绘制。
35、本申请的有益效果为：由于部分值赋为0的列在最初渲染之后，会通过ctx.filltext函数随机得到str字符串中的一个字符进行文字绘制，因此，可以大大加快透明遮罩层对文字的隐藏效率。
36、在一种实现方式中，在根据所述初始化后的盒模型和所述添加后的绘制函数，生成所述流星雨页面之后，所述方法还包括：
37、将所述流星雨页面进行封装，获得对应的流星雨页面组件。
38、本申请的有益效果为：由于将流星雨页面进行封装，获得了对应的流星雨页面组件，以便于在需要进行文字隐藏时，可以直接调用该流星雨页面组件，因此，大大便于用户进行使用，提高了用户体验感。
39、一方面，提供一种流星雨页面生成装置，应用于javascript语言编写环境，所述装置包括：
40、盒模型初始化单元，用于对盒模型进本文档来自技高网...
【技术保护点】
1.一种流星雨页面生成方法，其特征在于，应用于JavaScript语言编写环境，所述方法包括：
2.如权利要求1所述的方法，其特征在于，所述对盒模型进行初始化，获得初始化后的盒模型的步骤，包括：
3.如权利要求1所述的方法，其特征在于，所述对盒模型进行初始化，获得初始化后的盒模型的步骤，包括：
4.如权利要求1所述的方法，其特征在于，所述对盒模型进行初始化，获得初始化后的盒模型的步骤，包括：
5.如权利要求1所述的方法，其特征在于，所述在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数的步骤，包括：
6.如权利要求1所述的方法，其特征在于，所述在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数的步骤，包括：
7.如权利要求1所述的方法，其特征在于，所述在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数的步骤，包括：
8.如权利要求7所述的方法，其特征在于，所述通过for循环函数，在绘制函数DrawString中，循环生成文字的步骤，包括：
9.如权利要求8所述的方法，其特征在于，
10.如权利要求1所述的方法，其特征在于，在根据所述初始化后的盒模型和所述添加后的绘制函数，生成所述流星雨页面之后，所述方法还包括：
11.一种流星雨页面生成装置，其特征在于，应用于JavaScript语言编写环境，所述装置包括：
12.一种电子设备，其特征在于，所述设备包括：
13.一种存储介质，其特征在于，所述存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行权利要求1-10中任一所述的方法。
...【技术特征摘要】
1.一种流星雨页面生成方法，其特征在于，应用于javascript语言编写环境，所述方法包括：
2.如权利要求1所述的方法，其特征在于，所述对盒模型进行初始化，获得初始化后的盒模型的步骤，包括：
3.如权利要求1所述的方法，其特征在于，所述对盒模型进行初始化，获得初始化后的盒模型的步骤，包括：
4.如权利要求1所述的方法，其特征在于，所述对盒模型进行初始化，获得初始化后的盒模型的步骤，包括：
5.如权利要求1所述的方法，其特征在于，所述在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数的步骤，包括：
6.如权利要求1所述的方法，其特征在于，所述在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数的步骤，包括：
7.如权利要求1所述的方法，其特征在于，所述在绘制函数中添加透明遮罩层信息，获得添加后的绘制函数的...
【专利技术属性】
技术研发人员：请求不公布姓名，请求不公布姓名，
申请(专利权)人：成都数之联科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。