[发明专利]一种弹幕渲染方法及装置

说明书

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

技术领域

本发明涉及网页渲染领域，更具体地，涉及一种弹幕渲染方法及装置。

背景技术

在网页渲染领域，基于DOM的弹幕渲染技术是目前大部分弹幕应用都在采用的技术，其原理是将弹幕文字封装到一个HTML DOM元素中，再利用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为本发明又一个实施例的弹幕渲染装置的测试设备结构框图。

具体实施方式

下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。