CN110022184A - 一种基于canvas的广播方法、存储介质、设备及系统 - Google Patents

Abstract

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

Description

一种基于canvas的广播方法、存储介质、设备及系统

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

监听单元，其内部存在一广播层级数组列表，所述广播层级数组列表内具有按照顺序排列的多层广播数组，所述监听单元用于监听广播消息，并将所述广播消息按时间顺序存储于相应层的所述广播数组内，所述广播消息包括广播ID以及广播描述；

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

绘制单元，其用于根据所述画布数据进行广播绘制工作，并形成画布。

在上述技术方案的基础上，基于canvas的广播系统中的所述绘制单元包括：

绘制预解析单元，其用于根据所述广播ID以及所述广播描述获取广播配置文件，所述广播配置文件包括广播头图链接、广播中间图链接、广播尾图链接、广播文字大小以及广播文字样式；

绘制工作单元，其用于根据所述广播配置文件进行加载，获得广播头图、广播中间图以及广播尾图。

在上述技术方案的基础上，基于canvas的广播系统还包括：

自动清除单元，其用于在所述绘制单元进行所述广播绘制工作之前，清除前次广播绘制工作形成的画布。

在上述技术方案的基础上，基于canvas的广播系统中：

各所述广播数组用于对应存储一显示层级的所述广播消息，所述广播数组的层级与其对应的所述显示层级相同；

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

与现有技术相比，本发明的优点在于：

(1)本发明利用创建的canvas元素以及其内置的广播层级数组列表对广播信号进行监听，并将广播消息根据顺序存储在广播层级数组列表内的多层广播数组内；

与现有技术相比，本发明利用canvas技术能够在提高页面渲染性能的基础上，避免在数据处理时增加性能负载。

附图说明

图1为本发明实施例中基于canvas的广播方法的流程图；

图2为本发明实施例中基于canvas的广播设备的结构框图；

图3为本发明实施例中基于canvas的广播系统的结构框图。

具体实施方式

以下结合附图对本发明的实施例作进一步详细说明。

参见图1所示，本发明实施例提供一种基于canvas的广播方法，包括以下步骤：

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

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

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

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

本发明中，canvas元素即画布元素，其通过内置的广播层级数组列表监听广播消息，而广播层级数组列表内具有按照顺序排列的多层广播数组，广播消息则按照顺序存储与相应层的广播数组内，广播消息包括广播ID以及广播描述；

最后通过广播消息以及广播数组获取多个画布数据。

由于canvas可以细化到像素级别，因此本发明利用canvas技术能够在提高页面渲染性能的基础上，避免在数据处理时增加性能负载。

另外，本实施例中，新建canvas元素的方法可以是

通过document.getelementbyid()或者直接使用jquery库获取到canvas元素；

也可在js代码中通过document.addelement()新增的canvas元素，直接根据其返回的元素对象就是新增的canvas元素，这个新增的canvas元素为canvasElenmt。

而本实施例中，在监听广播消息时，则可通过以采取websocket来做广播消息监听，建立起WebSocket连接后，通过onmessage来监听服务器消息，与服务器规定一些特定的消息为广播消息，当收到上述特定的消息时，则认为是收到了服务器发送来到广播消息，这个时候通过全局事件系统抛出一个广播事件。

需要说明的是，本发明中的广播层级数组列表存在时间维度以及显示层级维度这两个维度，时间维度即存入广播数组的时间即进行广播显示的时间，而显示层级维度则为各广播消息在显示时的显示层级；

各广播数组用于对应存储一显示层级的广播消息，广播数组的层级与其对应的显示层级相同；

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

可以理解的是，显示层级即表示本方法中的处于不同广播数组中的广播消息可以根据实际需求进行重叠显示；

在同一层广播数组中的广播消息是先来先存入到广播数组中，不同层级的广播数据存储到代表不同层级的广播数组中。

另外，本方法在配置文件时具有容错机制，

读取配置文件中该广播的层级设为index，若index小于1时将index视为1，若index大于10时将index视为10。

本实施例中，基于canvas的广播方法内，获取画布数据的步骤包括：

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

根据广播配置文件进行加载，获得广播头图、广播中间图以及广播尾图；

需要说明的是获取单个画布数据的过程为：根据广播ID读取广播配置文件，进而读取其广播的配置jsonData，jsonData中包含广播头图链接aurl、广播中间图链接burl以及广播尾图链接curl，而广播描述则包括描述文本的文字大小fontSize以及文本样式FontStyle，借助以上的数据可获得的广播头图aimg、广播中间图bimg以及广播尾图cimg；

上述方法能够准确的获得广播消息的数据以便后期进行完整显示。

需要说明的是，由于本方法中广播消息存在两个维度，因此在广播绘制工作时，使用嵌套两次for循环来绘制广播，第一层循环表示层级，第二层循环表示该层内的广播消息；

DrawHandle就是绘制广播具体方法，广播绘制工作是一层一层的进行绘制，所以层级高的永远是后绘制，在交汇的地方盖住层级低的。在DrawHandle调用步骤用canvas的属性获取2D画笔cxt(cxt＝canvas.getContext(“2d”))，获得到画笔后就可以在canvas画布上绘画，利用cxt的绘制图片方法drawImge方法分别绘制广播头图aimg、广播中间图bimg以及广播尾图cimg。

本实施例中，具体给出一绘制工作的例子：

Cxt.drawImge(img，0，0，w，h，X1，y1，w1，h1)；

其中img就是头图或者中图，位图对象(步骤3中的aimg，bimg，cimg)

w，h就是img的宽高。

w1与h1一般就是img的宽高(当img是中图时取的是描述文本的长度也就是会拉伸中图，让它做描述文本的底)。

y1是绘制到舞台上的Y坐标(默认是0可以通过配置参数传入)

X1是绘制到舞台的X坐标，常规的广播是从右向左飘动，X1等于舞台的宽度stageW减去速度v(每16毫秒广播移动的坐标可以默认为3)乘以帧频次数index。

X1＝stageW-v*index这样每16毫秒广播就会向左飘逸3个像素

绘制完图片会再绘制文本先根据配置设置画笔的样式(font color)利用画笔的画文本方法fillText。

例如：cxt.fillText(des，x，y)；

Des为广播描述内容；

X为文本出现在舞台上的X坐标与上面图片计算的方一致；

Y为文本出现在舞台的Y坐标与上面图片计算的方一致。

本实施例中，基于canvas的广播方法还包括自动清除机制；

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

具体可以设置setIntervald定时器，每16毫秒执行一次(相当于帧频60)，每次响应后清除Canvas画布，从而避免重复绘画。

本实施例中，各广播数组用于对应存储一显示层级的广播消息，广播数组的层级与其对应的显示层级相同；

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

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

参见图2所示，本发明实施例还提供一种基于canvas的广播设备，包括存储器、处理器及存储在存储器上并在处理器上运行的计算机程序，其特征在于：处理器执行计算机程序时实现上述基于canvas的广播方法的步骤。

参见图3所示，本发明实施例还提供一种基于canvas的广播系统，该系统包括：

监听单元，其内部存在一广播层级数组列表，广播层级数组列表内具有按照顺序排列的多层广播数组，监听单元用于监听广播消息，并将广播消息按时间顺序存储于相应层的广播数组内，广播消息包括广播ID以及广播描述；

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

绘制单元，其用于根据画布数据进行广播绘制工作，并形成画布。

本实施例中，基于canvas的广播系统内的绘制单元包括：

绘制预解析单元，其用于根据广播ID以及广播描述获取广播配置文件，广播配置文件包括广播头图链接、广播中间图链接、广播尾图链接、广播文字大小以及广播文字样式；

绘制工作单元，其用于根据广播配置文件进行加载，获得广播头图、广播中间图以及广播尾图。

本实施例中，基于canvas的广播系统还包括：

自动清除单元，其用于在绘制单元进行广播绘制工作之前，清除前次广播绘制工作形成的画布。

本实施例中，基于canvas的广播系统内：

各广播数组用于对应存储一显示层级的广播消息，广播数组的层级与其对应的显示层级相同；

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

需要说明的是：上述实施例提供的系统在实现基于canvas的广播操作时，仅以上述各功能模块的划分进行举例说明，实际应用中，可根据需要而将上述功能分配由不同功能模块完成，即将系统的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。

本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。

本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims (10)

1.一种基于canvas的广播方法，其特征在于，该方法包括以下步骤：

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

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

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

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

2.如权利要求1所述的基于canvas的广播方法，其特征在于，获取画布数据的步骤包括：

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

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

3.如权利要求1所述的基于canvas的广播方法，其特征在于：该方法还包括自动清除机制；

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

4.如权利要求1所述的基于canvas的广播方法，其特征在于：各所述广播数组用于对应存储一显示层级的所述广播消息，所述广播数组的层级与其对应的所述显示层级相同；

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

5.一种存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现上述权利要求1至4中任一项所述方法的步骤。

6.一种基于canvas的广播设备，包括存储器、处理器及存储在所述存储器上并在所述处理器上运行的计算机程序，其特征在于：所述处理器执行所述计算机程序时实现上述权利要求1至4中任一项所述方法的步骤。

7.一种基于canvas的广播系统，其特征在于，该系统包括：

监听单元，其内部存在一广播层级数组列表，所述广播层级数组列表内具有按照顺序排列的多层广播数组，所述监听单元用于监听广播消息，并将所述广播消息按时间顺序存储于相应层的所述广播数组内，所述广播消息包括广播ID以及广播描述；

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

绘制单元，其用于根据所述画布数据进行广播绘制工作，并形成画布。

8.如权利要求7所述的基于canvas的广播系统，其特征在于，所述绘制单元包括：

绘制预解析单元，其用于根据所述广播ID以及所述广播描述获取广播配置文件，所述广播配置文件包括广播头图链接、广播中间图链接、广播尾图链接、广播文字大小以及广播文字样式；

绘制工作单元，其用于根据所述广播配置文件进行加载，获得广播头图、广播中间图以及广播尾图。

9.如权利要求7所述的基于canvas的广播系统，其特征在于，该系统还包括：

自动清除单元，其用于在所述绘制单元进行所述广播绘制工作之前，清除前次广播绘制工作形成的画布。

10.如权利要求7所述的基于canvas的广播系统，其特征在于：

各所述广播数组用于对应存储一显示层级的所述广播消息，所述广播数组的层级与其对应的所述显示层级相同；

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