一种弹幕渲染方法及装置制造方法及图纸

本发明专利技术提供一种弹幕渲染方法及装置，所述的方法包括：S1，获取弹幕原始数据；S2，将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；S3，当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。本发明专利技术利用HTML5的Canvas功能，使得弹幕不在依赖于Flash，增加了弹幕绘制的效率，使弹幕动画在浏览器上展示更流畅，增加了用户体验度。

【技术实现步骤摘要】
一种弹幕渲染方法及装置
本专利技术涉及网页渲染领域，更具体地，涉及一种弹幕渲染方法及装置。
技术介绍
在网页渲染领域，基于DOM的弹幕渲染技术是目前大部分弹幕应用都在采用的技术，其原理是将弹幕文字封装到一个HTMLDOM元素中，再利用JavaScript将装载弹幕文字的DOM元素放入到HTML中进行渲染，然后对装载弹幕文字的DOM元素不断进行位置计算以及改变从而形成移动动画。采用DOM的弹幕渲染技术，由于需要对所有的DOM元素的位置计算计算和改变，在弹幕文字量非常大的情况下会使系统CPU运算频率过高，内存占用过大，而且弹幕的动画会有卡顿现象，尤其在移动端上表现的更为明显。
技术实现思路
本专利技术提供一种克服上述问题或者至少部分地解决上述问题的弹幕渲染方法及装置，解决了基于DOM渲染的效率低下、占用内存过大的问题。根据本专利技术的一个方面，提供了一种弹幕渲染方法，包括：S1，获取弹幕原始数据；S2，将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；S3，当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。根据本专利技术的另一个方面，还提供了一种弹幕渲染装置，包括：获取模块，用于获取弹幕原始数据；对象生成模块，用于将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；渲染模块，用于当渲染画布Canvas中存在空闲弹道时，将弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。本专利技术的有益效果为：将弹幕原始数据生成对应的弹幕对象，并将弹幕对象插入到渲染画布Canvas的弹道中，对弹道中的所有弹幕对象一起进行渲染，利用HTML5的Canvas功能，每一个弹幕对象是一幅图片，因此在形成弹幕动画时，只需要改变弹幕对象图片对应的位置即可，相比现有的基于DOM的渲染需要对每一个DOM元素中的弹幕文字不断地进行位置计算以及改变，可增加弹幕绘制的效率，无需占用过多的内存，使得弹幕动画在浏览器上展示得更为流畅，增加了用户体验度。附图说明图1为本专利技术一个实施例的弹幕渲染方法流程图；图2为弹幕对象生成过程流程图；图3为弹幕对象渲染过程流程图；图4为弹幕渲染方法的整个工作流程图；图5为本专利技术另一个实施例的弹幕渲染装置连接框图；图6为弹幕渲染装置的总体连接框图；图7为本专利技术又一个实施例的弹幕渲染装置的测试设备结构框图。具体实施方式下面结合附图和实施例，对本专利技术的具体实施方式作进一步详细描述。以下实施例用于说明本专利技术，但不用来限制本专利技术的范围。参见图1，为本专利技术一个实施例的弹幕渲染方法，主要用于网页渲染、动画制作领域，其中，HTML5是互联网的核心语言，HTML的第5次重大修改，用于提供网页上显示的内容，现在大部分现代浏览器都支持HTML5。对比HTML4而言，HTML5具有原生视音频支持、原生动画自持、本地数据库和socket网络套接字等新特性，如今已经有很多网站都将技术转移到了HTML5。Canvas表示一个HTML5画布元素，能支持脚本化浏览器端绘图操作。Canvas支持互动，能够响应用户的操作，比如鼠标点击、键盘按键等，还能够使用Canvas制作动画，目前很多网页游戏都是基于Canvas制作的。Canvas还能绘制2D和3D画面，在浏览器支持方面，只要是支持HTML5的浏览器都会支持Canvas，并且使用Canvas技术制作的游戏或动画不需要安装任意浏览器插件。本实施例提供的弹幕渲染方法主要包括：S1，获取弹幕原始数据；S2，将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；S3，当渲染画布Canvas中存在空闲弹道时，将弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。本实施例将弹幕原始数据生成对应的弹幕对象，并将弹幕对象插入到渲染画布Canvas的弹道中，对弹道中的所有弹幕对象一起进行渲染，利用HTML5的Canvas功能，每一个弹幕对象是一幅图片，因此在形成弹幕动画时，只需要改变弹幕对象图片对应的位置即可，相比现有的基于DOM的渲染需要对每一个DOM元素中的弹幕文字不断地进行位置计算以及改变，可增加弹幕绘制的效率，无需占用过多的内存，使得弹幕动画在浏览器上展示得更为流畅，增加了用户体验度。在本专利技术的一个实施例中，上述步骤S1获取弹幕原始数据的过程为，在浏览器中可以设计一个弹幕数据获取线程，通常，弹幕数据获取线程采用WebSocket封装，采用WebSocket技术与弹幕服务器进行交互来获取弹幕服务器上的弹幕原始数据。具体的，创建一个WebSocket对象，通过消息监听机制，获取从弹幕服务器传递的弹幕原始数据，并将获取的弹幕原始数据存放到弹幕池中。其中，弹幕服务器中的弹幕原始数据是具有顺序的，弹幕数据获取线程将获取的弹幕原始数据按照原始顺序放入弹幕池中。其中，弹幕池采用JavaScript数组存放弹幕原始数据，可以向JavaScript数组中增加弹幕原始数据，也可以从JavaScript数组中提取弹幕原始数据，并将提取后的弹幕原始数据进行擦除。在本专利技术的另一个实施例中，需要说明的是，弹幕原始数据中携带有弹幕特征数据，比如弹幕发送者等级、节日特征、礼物特征(是否火箭、飞机、跑车等)以及发送者指定的弹幕字体等。在将弹幕原始数据生成弹幕对象时，需要按照某一种样式进行生成，故需要知道弹幕原始数据对应的预设弹幕样式。因此，在本实施例中建立弹幕特征数据与预设弹幕样式之间的对应关系，比如，建立弹幕原始数据的发送者等级与预设弹幕样式之间的对应关系。在上述步骤S2将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象的过程中，按照固定频率从弹幕池中获取预定数量的弹幕原始数据，即定时从弹幕池中提取弹幕原始数据。例如，本实施例中，可以开启一线程以每秒60次的频率从弹幕池中获取弹幕原始数据。避免由于每次提取的弹幕原始数据量过大影响提取效率，每一个只从弹幕池中提取预定数量的弹幕原始数据。参见图2，从弹幕池中提取了多条弹幕原始数据后，获取每一条弹幕原始数据的弹幕特征数据，并根据事先建立的弹幕特征数据与预设弹幕样式之间的对应关系，得到每一条弹幕原始数据对应的预设弹幕样式。按照相应的预设弹幕样式先将每一条弹幕原始数据生成对应的弹幕图像，然后将弹幕图像以及弹幕相关数据，比如弹幕图像宽度、弹幕图像移动速度等，封装成弹幕对象，并将生成的弹幕对象存放于弹幕队列中。其中，弹幕对象是单条弹幕画面的封装，弹幕对象的属性信息包括弹幕内容和弹幕样式，弹幕样式主要包括弹幕字体、弹幕颜色、弹幕字间距、弹幕宽度、弹幕背景，弹幕对象还包含弹幕移动速度和弹幕当前所处位置等属性信息。在本专利技术的一个实施例中，步骤S3中进行弹幕对象的渲染时，首先，绘制一渲染画布Canvas，获取该渲染画布Canvas的高度，根据预设的弹道的高度，计算渲染画布Canvas中的弹道的数量，用一数组来存储整个渲染画布Canvas中的所有弹道，对所有的弹道进行标识，本实施例中，可以对所有的弹道进行编号。随后，配置一渲染线程，在渲染线程中循环渲染画布Canvas中的弹道，获取每一个弹道中最后一个弹幕对象的位置；当弹道中最后一个弹幕对象的位置与弹幕区域最边缘的距离大于预设距离时，确定渲染本文档来自技高网...

【技术保护点】
一种弹幕渲染方法，其特征在于，包括：S1，获取弹幕原始数据；S2，将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；S3，当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。

【技术特征摘要】
1.一种弹幕渲染方法，其特征在于，包括：S1，获取弹幕原始数据；S2，将每一条弹幕原始数据按照相应的预设弹幕样式生成对应的弹幕对象；S3，当渲染画布Canvas中存在空闲弹道时，将所述弹幕对象插入到所述空闲弹道中，并对所有弹道中的所有弹幕对象进行渲染。2.如权利要求1所述的弹幕渲染方法，其特征在于，所述步骤S1进一步包括：通过消息监听机制，获取从弹幕服务器传递的弹幕原始数据，并将获取的弹幕原始数据存放入弹幕池中。3.如权利要求2所述的弹幕渲染方法，其特征在于，所述弹幕池采用JavaScript数组存放弹幕原始数据。4.如权利要求2所述的弹幕渲染方法，其特征在于，所述弹幕原始数据中携带有对应的弹幕特征数据，事先建立弹幕特征数据与预设弹幕样式之间的对应关系；所述步骤S2进一步包括：S21,从弹幕池中获取多条弹幕原始数据，并获取每条弹幕原始数据对应的弹幕特征数据；S22，根据每条弹幕原始数据的弹幕特征数据以及弹幕特征数据和预设弹幕样式的对应关系，得到每条弹幕原始数据相应的预设弹幕样式；S23，按照相应的预设弹幕样式，将每一条弹幕原始数据生成对应的弹幕对象，并将生成的所述弹幕对象存放于弹幕队列中。5.如权利要求4所述的弹幕渲染方法，其特征在于，所述步骤S21进一步包括：按照固定频率从所述弹幕池中提取预定数量的弹幕原始数据。6.如权利要求5所述的弹幕渲染方法，其特征在于，所述步骤S3中通过如下方式判断渲染画布Canvas中是否存在空闲弹道：配置并启动一渲染线程，在渲染线程中循环渲染画布Canvas中的弹道，获...

【专利技术属性】
技术研发人员：姚尧，
申请(专利权)人：武汉斗鱼网络科技有限公司，
类型：发明
国别省市：湖北,42