[发明专利]一种基于canvas的广播方法、存储介质、设备及系统

说明书

本发明公开了一种基于canvas的广播方法、存储介质、设备以及系统，涉及广播技术领域，该方法包括以下步骤：创建一canvas元素，其内置一广播层级数组列表，广播层级数组列表内包括按照顺序排列的多层广播数组；利用canvas元素监听广播消息，并将广播消息按顺序存储于相应层的广播数组内，广播消息包括广播ID以及广播描述；根据存储于多层广播数组中的广播消息和广播数组的排序进行配置，获得多个画布数据；根据多个画布数据的时序依次进行广播绘制工作并形成多个依时序排列的画布。本发明利用canvas技术能够在提高页面渲染性能的基础上，避免在数据处理时增加性能负载。

技术领域

本发明涉及广播技术领域，具体涉及一种基于canvas的广播方法、存储介质、设备及系统。

背景技术

现有的渲染广播系统的传统方式是使用dom节点方式，每一个广播是一个页面节点元素，甚至有时候细化到每一个广播元件都是一个页面元素；

但传统方式当广播数量变多时页面上就会出现大量的节点元素，增加了数据处理的负担，增加了性能负载，最终会影响页面渲染的性能。

Canvas是HTML5提供的一个用于展示绘图效果的标签，它提供了一个空白的图形区域，使用特定的javaScriptAPI来绘画图形。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种基于canvas的广播方法、存储介质、设备及系统，利用canvas技术能够在提高页面渲染性能的基础上，避免在数据处理时增加性能负载。

为达到以上目的，本发明采取的技术方案是：

一种基于canvas的广播方法，包括以下步骤：

创建一canvas元素，其内置一广播层级数组列表，所述广播层级数组列表内包括按照顺序排列的多层广播数组；

利用所述canvas元素监听广播消息，并将所述广播消息按顺序存储于相应层的所述广播数组内，所述广播消息包括广播ID以及广播描述；

根据存储于多层广播数组中的广播消息和广播数组的排序进行配置，获得多个画布数据；

根据多个画布数据的时序依次进行广播绘制工作并形成多个依时序排列的画布。

在上述技术方案的基础上，基于canvas的广播方法中获取画布数据的步骤包括：

根据所述广播ID以及所述广播描述获取广播配置文件，所述广播配置文件包括广播头图链接、广播中间图链接、广播尾图链接、广播文字大小以及广播文字样式；

根据所述广播配置文件进行加载，获得用于组成所述画布数据的广播头图、广播中间图以及广播尾图。

在上述技术方案的基础上，基于canvas的广播方法还包括自动清除机制；

在进行当前广播绘制工作之前，清除前一次广播绘制工作形成的画布。

在上述技术方案的基础上，基于canvas的广播方法中：各所述广播数组用于对应存储一显示层级的所述广播消息，所述广播数组的层级与其对应的所述显示层级相同；

每一所述广播数组内根据时间顺序存储多个属于同一显示层级的所述广播消息。

本发明还公开一种存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述基于canvas的广播方法的步骤。

本发明还公开一种基于canvas的广播设备，包括存储器、处理器及存储在所述存储器上并在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述基于canvas的广播方法的步骤。

本发明还公开一种基于canvas的广播系统，该系统包括：