图形绘制方法及装置与流程

本发明涉及浏览器图形绘制技术领域，具体而言，涉及一种图形绘制方法及装置。

背景技术：

视频监控产品通常需要配备一个基于b/s(browser/server，浏览器/服务器)结构的能够用于观看实况视频并在实况视频上绘制一些图形(包括几何图形及文字图形)的终端设备，用户通过这样的终端设备在实况视频上通过绘制图形的方式实现标注、批注等业务功能。但随着浏览器技术的不断发展，以往能够在浏览器中用于实现图形绘制功能的插件技术，在基于html5技术形成的新版本浏览器上变得无法适用了，而目前基于html5技术形成的新版本浏览器通过videos标签和canvas标签实现的图形绘制功能也仅能在图像显示层面实现复杂图形绘制，而无法在播放实况视频的同时在该实况视频上进行图形绘制，且图形绘制时所对应的数据处理量大，数据处理效率低，无法针对绘制出的图形进行类似选中的交互性处理。

技术实现要素：

为了克服现有技术中的上述不足，本发明的目的在于提供一种图形绘制方法及装置，所述图形绘制方法的数据处理量小，数据处理效率高，能够在浏览器播放显示的视频上进行图形绘制，以达到图形绘制动画效果，并确保绘制出的图形能够进行交互性处理。

就方法而言，本发明实施例提供一种图形绘制方法，所述方法应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据，所述方法包括：

实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生；

当监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标；

当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果。

就装置而言，本发明实施例提供一种图形绘制装置，所述装置应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据，所述装置包括：

事件监听模块，用于实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生；

坐标获取模块，用于当监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标；

图形绘制模块，用于当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果。

相对于现有技术而言，本发明实施例提供的图形绘制方法及装置具有以下有益效果：所述图形绘制方法的数据处理量小，数据处理效率高，能够在浏览器播放显示的视频上进行图形绘制，以达到图形绘制动画效果，并确保绘制出的图形能够进行交互性处理。所述方法应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据。首先，所述方法实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生。接着，所述方法在监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标。最后，所述方法在每次获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，从而通过在与用于显示视频流的所述视频流显示窗口不在同一层面的画布上针对每帧图像绘制出对应的目标图形，达到在播放显示视频流的同时于该视频流上实现图形绘制动画效果，从而确保绘制出的目标图形能够进行交互性处理。其中因所述目标图形的绘制是基于基础图形的结构化特征数据实现的，便无需大量耗费终端设备的计算资源来从无到有地构建绘制所述目标图形，从而降低图形绘制过程的数据处理量，并相应提高数据处理效率。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举本发明较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对本发明权利要求保护范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例提供的终端设备的一种方框示意图。

图2为本发明实施例提供的图形绘制方法的流程示意图之一。

图3为图2中步骤s210包括的子步骤的流程示意图。

图4为图2中步骤s220包括的子步骤的流程示意图。

图5为图2中步骤s230包括的子步骤的流程示意图。

图6为本发明实施例提供的图形绘制方法的流程示意图之二。

图7为本发明实施例提供的图形绘制装置的方框示意图之一。

图8为图7中事件监听模块的方框示意图。

图9为图7中图形绘制模块的方框示意图。

图10为本发明实施例提供的图形绘制装置的方框示意图之二。

图标：10-终端设备；11-存储器；12-处理器；13-通信单元；14-显示单元；100-图形绘制装置；110-事件监听模块；120-坐标获取模块；130-图形绘制模块；111-子事件监听子模块；112-绘制判断子模块；131-坐标转换子模块；132-特征生成子模块；133-渲染绘制子模块；140-参数调整模块。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

下面结合附图，对本发明的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。

请参照图1，是本发明实施例提供的终端设备10的一种方框示意图。在本发明实施例中，所述终端设备10用于通过浏览器页面对视频流中的每帧图像进行显示，以实现对视频流的播放显示。所述终端设备10还用于在播放显示视频流的同时，供用户在所述视频流上进行图形绘制，并达到图形绘制动画效果。其中，所述终端设备10可以是，但不限于，智能手机、个人电脑(personalcomputer，pc)、平板电脑、个人数字助理(personaldigitalassistant，pda)、移动上网设备(mobileinternetdevice，mid)等。

在本实施例中，所述终端设备10包括图形绘制装置100、存储器11、处理器12、通信单元13及显示单元14。所述存储器11、所述处理器12、所述通信单元13及所述显示单元14各个元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述图形绘制装置100包括至少一个能够以软件或固件(firmware)的形式存储于所述存储器11中的软件功能模块，所述处理器12通过运行存储在存储器11内的所述图形绘制装置100对应的软件功能模块，从而执行各种功能应用以及数据处理。

在本实施例中，所述显示单元14包括显示屏，所述显示单元14通过所述显示屏对浏览器页面进行显示，从而在浏览器页面的视频流显示窗口中对视频流的每帧图像进行显示。所述终端设备10在所述视频流显示窗口所在层面的上层部署了覆盖所述视频流显示窗口的画布，并通过所述画布针对视频流的每帧图像绘制出对应的目标图形，然后通过所述显示单元14进行显示每帧图像对应的目标图形，达到播放显示视频流的同时于该视频流上实现图形绘制动画效果。其中，所述画布所在层面与所述视频流显示窗口所在层面并非同一层面，在所述画布上绘制图形并不会对播放显示的视频流造成干扰。在本实施例的一种实施方式中，因人眼对25帧/秒的画面会感受不到卡顿，故此所述视频流中相邻两帧图像之间的显示时间间隔应当不大于40ms，所述终端设备10针对每帧图像进行的图形绘制也需确保每次图形绘制时的时间点与时间间隔均与所述视频流播放显示状况相匹配，即每次图形绘制对应视频流的一帧图像。

在本实施例中，所述存储器11可用于存储至少一个基础图形的结构化特征数据，其中所述基础图形可以是几何图形，也可以是文字图形。当所述基础图形为几何图形时，所述基础图形可以是，但不限于，矩形、圆形、腰形、三角形、椭圆形等。每个基础图形的结构化特征数据用于表示该基础图形的关键特征，所述关键特征包括属性特征及行为特征，所述属性特征包括该基础图形在对应画布中被绘制时的左上角坐标、右下角坐标，线条的粗细、颜色，矩形中心是否填充，填充色，透明度等；所述行为特征包括该基础图形在对应画布中是否被选中，是否显示等。不同基础图形对应的结构化特征数据相互之间存在差异，所述基础图形的结构化特征数据与当前画布相互匹配。若当前画布的位置和/或尺寸发生改变时，该画布对应的所述至少一个基础图形的结构化特征数据也将进行调整，以确保所述至少一个基础图形的结构化特征数据始终与所述画布匹配，使得基于基础图形的结构化特征数据在所述画布上绘制出的目标图形能够进行交互性处理，并因为所述目标图形的绘制是基于基础图形的结构化特征数据实现的，便无需大量耗费终端设备10的计算资源来从无到有地构建绘制所述目标图形，从而降低图形绘制过程的数据处理量，并相应提高数据处理效率。

在本实施例中，所述存储器11可以是，但不限于，随机存取存储器(randomaccessmemory，ram)，只读存储器(readonlymemory，rom)，可编程只读存储器(programmableread-onlymemory，prom)，可擦除可编程只读存储器(erasableprogrammableread-onlymemory，eprom)，电可擦除可编程只读存储器(electricerasableprogrammableread-onlymemory，eeprom)等。所述存储器11可用于存储程序，所述处理器12在接收到执行指令后，执行所述程序。

在本实施例中，所述处理器12可以是一种具有信号的处理能力的集成电路芯片。所述处理器12可以是通用处理器，包括中央处理器(centralprocessingunit，cpu)、网络处理器(networkprocessor，np)等。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

在本实施例中，所述通信单元13用于通过网络建立所述终端设备10与其他电子设备之间的通信连接，并通过网络从所述其他电子设备处获取需要播放显示的视频流。其中所述其他电子设备可以是，但不限于，视频监控设备、存储有视频流数据的服务器、存储有视频流数据的其他终端设备等。

在本实施例中，所述终端设备10通过所述图形绘制装置100在浏览器播放显示的视频上进行图形绘制，以达到图形绘制动画效果，并确保绘制出的图形能够进行交互性处理。

可以理解的是，图1所示的结构仅为终端设备10的一种结构示意图，所述终端设备10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

请参照图2，是本发明实施例提供的图形绘制方法的流程示意图之一。在本发明实施例中，所述图形绘制方法应用于上述的终端设备10，所述终端设备10通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，其中所述终端设备10在所述视频流显示窗口上层部署有画布，所述终端设备10中存储有与所述画布匹配的至少一个基础图形的结构化特征数据。下面对图2所示的图形绘制方法的具体流程和步骤进行详细阐述。

步骤s210，实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生。

在本实施例中，所述画笔用于在所述终端设备10当前对应的画布上绘制图形，用户在选定所述至少一个基础图形中的某个被选定的基础图形进行图形绘制时，可通过操控所述画笔在所述终端设备10中的事件状态的方式，在所述画布上基于所述被选定的图形绘制出对应的目标图形，其中所述画笔的事件状态可通过操控鼠标的点击移动的方式进行调控，也可通过触屏点击移动的方式进行调控。所述终端设备10通过实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生的方式，可以直观地了解到是否需要在所述画布上针对当前显示的视频流进行图形绘制。

可选地，请参照图3，是图2中步骤s210包括的子步骤的流程示意图。在本实施例中，所述画笔的事件状态包括画笔按下状态、绘制移动状态及画笔弹起状态，所述画笔按下状态表示所述画笔当前处于被用户按下且准备进行图形绘制的状态，所述绘制移动状态表示所述画笔当前处于被按下并被用户操控移动以进行图形绘制的状态，所述画笔弹起状态表示所述画笔当前处于图形绘制完成的状态。其中，所述目标图形绘制事件包括画笔按下子事件、绘制移动子事件及画笔弹起子事件，所述画笔按下子事件对应所述画笔按下状态，所述绘制移动子事件对应所述绘制移动状态，所述画笔弹起子事件对应所述画笔弹起状态，所述步骤s210可以包括子步骤s211及子步骤s212。

子步骤s211，分别对画笔按下子事件、绘制移动子事件及画笔弹起子事件的产生情况进行实时监听。

子步骤s212，当监听到所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件产生时，判定目标图形绘制事件产生。

在本实施例中，当监听到所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件时，表明所述画笔当前被用户使用进行图形绘制，即所述画笔基于被选定的基础图形进行的目标图形绘制事件产生了。

步骤s220，当监听到所述目标图形绘制事件时，在视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标。

在本实施例中，当所述终端设备10监听到所述目标图形绘制事件包括的所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件时，所述终端设备10将根据当前需要显示的视频流中每帧图像各自显示时的时间点，获取每个图像显示时间点下的所述画笔在所述浏览器页面中的绘制坐标，以通过每次获取到的绘制坐标在所述画布上绘制出与当前显示的视频流图像匹配的目标图形，其中每帧图像对应一个目标图形。

可选地，请参照图4，是图2中步骤s220包括的子步骤的流程示意图。在本实施例中，所述绘制坐标包括绘制起始坐标及绘制终止坐标，所述绘制起始坐标表示当前目标图形绘制事件所对应的目标图形的起始绘制位置，所述绘制终止坐标表示当前目标图形绘制事件所对应的目标图形在绘制过程中于当前时间点的绘制进度位置。所述步骤s220中的在视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标的步骤包括子步骤s221、子步骤s222及子步骤s223。

子步骤s221，根据对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的监听结果，得到所述画笔在所述视频流中每帧图像显示时的时间点所对应的子事件信息。

在本实施例中，所述终端设备10在监听到目标图形绘制事件时，会在显示所述视频流中每帧图像的时间点根据监听结果，判断当前时间点监听到的子事件属于所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中的哪一个子事件，从而得到所述画笔在所述视频流中每帧图像显示时的时间点所对应的子事件信息。

子步骤s222，当所述子事件信息与所述画笔按下子事件对应时，以当前时间点下的所述画笔在浏览器页面中的位置坐标作为所述目标图形的绘制起始坐标。

在本实施例中，当所述终端设备10得到的子事件信息与所述画笔按下子事件对应时，表明所述画笔在当前时间点还未被用户操控着进行对目标图形的绘制，当前时间点下的所述画笔在浏览器页面中的位置坐标即为所述目标图形的绘制起始坐标。

子步骤s223，当所述子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，以当前时间点下的所述画笔在所述浏览器页面中的位置坐标作为所述目标图形的绘制终止坐标。

在本实施例中，当所述终端设备10得到的子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，表明所述画笔在当前时间点正处于图形绘制阶段或逼近图形绘制完成的阶段，当前时间点下的所述画笔在所述在浏览器页面中的位置坐标为当前时间点下与显示的所述视频流图像匹配的目标图形的绘制终止坐标。

在本实施例中，当所述终端设备10得到的子事件信息与所述画笔按下子事件对应时，当前时间点下对应的目标图形的绘制终止坐标在数值上与此时的绘制起始坐标相同，以确保无论基于哪个基础图形进行绘制的所述目标图形在此时均显示为一个点；当所述终端设备10得到的子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，当前时间点下的所述目标图形的绘制起始坐标，相同于所述子事件信息与所述画笔按下子事件对应时的目标图形的绘制起始坐标。

步骤s230，当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果。

在本实施例中，每当所述终端设备10获取到所述画笔在当前图像显示时的时间点所对应的绘制坐标时，所述终端设备10都将根据获取到的所述绘制坐标及所述被选定的基础图形的结构化特征数据，得到当前时间点应当在所述画布上显示出的目标图形的结构化特征数据，并基于得到的所述目标图形的结构化特征数据在所述画布上渲染绘制出与当前时间点播放显示的视频流图像匹配的目标图形，从而通过每帧图像对应一个目标图形的方式实现绘图动画效果。

可选地，请参照图5，是图2中步骤s230包括的子步骤的流程示意图。在本实施例中，所述步骤s230包括子步骤s231、子步骤s232及子步骤s233。

子步骤s231，对当前时间点的所述绘制起始坐标及所述绘制终止坐标进行坐标转换，得到当前时间点下的所述目标图形在所述画布上的渲染起始坐标及渲染终止坐标。

在本实施例中，所述绘制起始坐标与所述绘制终止坐标为当前时间点的目标图形在所述浏览器页面上对应的绘制坐标，所述终端设备10需对所述绘制起始坐标及所述绘制终止坐标进行坐标转换，得到所述目标图形在所述画布上的渲染绘制显示时的渲染起始坐标及渲染终止坐标。

子步骤s232，根据所述渲染起始坐标、所述渲染终止坐标及所述被选定的基础图形的结构化特征数据生成当前时间点下的所述目标图形的结构化特征数据。

在本实施例中，所述终端设备10需根据得到的所述渲染起始坐标、所述渲染终止坐标对被选定的基础图形的结构化特征数据进行数据调整，生成用于表示当前时间点下的所述目标图形的结构化特征数据。例如，被选定的基础图形为矩形，且所述被选定的基础图形的结构化特征数据包括左上角坐标(left，top)及右下角坐标(right，bottom)时，所述终端设备10通过将所述渲染起始坐标、所述渲染终止坐标分别与所述左上角坐标(left，top)及所述右下角坐标(right，bottom)进行替换，并保留所述被选定的基础图形的其他结构化特征数据的方式，得到当前时间点应当被渲染绘制到所述画布上的目标图形的结构化特征数据。

子步骤s233，基于所述目标图形的结构化特征数据在所述画布上渲染绘制出对应的所述目标图形。

在本实施例中，因结构化特征数据是与所述画布匹配的，因此每当所述终端设备10得到与当前时间点显示的视频流图像匹配的目标图形的结构化特征数据，所述终端设备10都将在不与视频流显示窗口处于同一层面的所述画布上，基于所述目标图形的结构化特征数据渲染绘制出对应的所述目标图形，达到在播放显示视频流的同时于该视频流上实现图形绘制动画效果，从而确保绘制出的目标图形能够进行交互性处理。其中因所述目标图形的绘制是基于基础图形的结构化特征数据实现的，便无需大量耗费终端设备10的计算资源来从无到有地构建绘制所述目标图形，从而降低图形绘制过程的数据处理量，并相应提高数据处理效率。

在本发明实施例中，所述终端设备10每次在所述画布上渲染绘制完成与当前显示的视频流图像匹配的目标图形后，都将对当前时间点的所述目标图形进行擦除或设置为不显示状态，以使所述终端设备10在下一帧图像显示时能够在外观上呈空白状的画布上绘制对应匹配的目标图形。

请参照图6，是本发明实施例提供的图形绘制方法的流程示意图之二。在本发明实施例中，所述图形绘制方法还包括步骤s209。

步骤s209，根据视频流显示窗口的位置、尺寸及视频流的分辨率对所述画布的位置及尺寸进行调整，并对应调整所述至少一个基础图形的结构化特征数据。

在本实施例中，所述终端设备10在响应用户操作进行图形绘制之前，需要检测所述视频流显示窗口在所述浏览器页面中的位置信息及尺寸信息，并对待显示视频流进行解析得到该视频流的分辨率，从而基于获取到的所述视频流显示窗口的位置、尺寸及所述视频流的分辨率对所述画布在所述浏览器页面中的位置及尺寸进行调整，以确保所述画布部署在所述视频流显示窗口上层，且所述画布的尺寸与所述视频流显示窗口尺寸匹配。

所述终端设备10在完成对所述画布的调整后，会基于所述画布当前的尺寸信息及位置信息对所述至少一个基础图形的结构化调整数据进行调整，以确保所述至少一个基础图形的结构化特征数据始终与所述画布匹配。

请参照图7，是本发明实施例提供的图形绘制装置100的方框示意图之一。在本发明实施例中，所述图形绘制装置100应用于图1中所示的终端设备10，所述终端设备10通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，其中所述终端设备10在所述视频流显示窗口上层部署有画布，所述终端设备10中存储有与所述画布匹配的至少一个基础图形的结构化特征数据。所述图形绘制装置100包括事件监听模块110、坐标获取模块120及图形绘制模块130。

所述事件监听模块110，用于实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生。

可选地，请参照图8，是图7中事件监听模块110的方框示意图。在本实施例中，所述目标图形绘制事件包括画笔按下子事件、绘制移动子事件及画笔弹起子事件，所述事件监听模块110包括子事件监听子模块111及绘制判断子模块112。

所述子事件监听子模块111，用于分别对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的产生情况进行实时监听。

所述绘制判断子模块112，用于当监听到所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件中任意一项子事件产生时，判定目标图形绘制事件产生。

所述坐标获取模块120，用于当监听到所述目标图形绘制事件时，在视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标。

在本实施例中，所述绘制坐标包括绘制起始坐标及绘制终止坐标，所述坐标获取模块120在视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标的方式包括：

根据对所述画笔按下子事件、所述绘制移动子事件及所述画笔弹起子事件的监听结果，得到所述画笔在所述视频流中每帧图像显示时的时间点所对应的子事件信息；

当所述子事件信息与所述画笔按下子事件对应时，以当前时间点下的所述画笔在浏览器页面中的位置坐标作为所述目标图形的绘制起始坐标；

当所述子事件信息与所述绘制移动子事件或所述画笔弹起子事件对应时，以当前时间点下的所述画笔在所述在浏览器页面中的位置坐标作为所述目标图形的绘制终止坐标。

所述图形绘制模块130，用于当获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，以实现绘图动画效果。

可选地，请参照图9，是图7中图形绘制模块130的方框示意图。在本实施例中，所述图形绘制模块130包括坐标转换子模块131、特征生成子模块132及渲染绘制子模块133。

所述坐标转换子模块131，用于对当前时间点的所述绘制起始坐标及所述绘制终止坐标进行坐标转换，得到当前时间点下的所述目标图形在所述画布上的渲染起始坐标及渲染终止坐标。

所述特征生成子模块132，用于根据所述渲染起始坐标、所述渲染终止坐标及所述被选定的基础图形的结构化特征数据生成当前时间点下的所述目标图形的结构化特征数据。

所述渲染绘制子模块133，用于基于所述目标图形的结构化特征数据在所述画布上渲染绘制出对应的所述目标图形。

请参照图10，是本发明实施例提供的图形绘制装置100的方框示意图之二。在本发明实施例中，所述图形绘制装置100还可以包括参数调整模块140。

所述参数调整模块140，用于根据视频流显示窗口的位置、尺寸及视频流的分辨率对所述画布的位置及尺寸进行调整，并对应调整所述至少一个基础图形的结构化特征数据，以使所述画布部署在所述视频流显示窗口上层，且所述至少一个基础图形的结构化特征数据与所述画布匹配。

综上所述，在本发明实施例提供的图形绘制方法及装置中，所述图形绘制方法的数据处理量小，数据处理效率高，能够在浏览器播放显示的视频上进行图形绘制，以达到图形绘制动画效果，并确保绘制出的图形能够进行交互性处理。所述方法应用于终端设备，所述终端设备通过浏览器页面中的视频流显示窗口对视频流的每帧图像进行显示，所述终端设备包括部署在视频流显示窗口上层的画布，及与所述画布匹配的至少一个基础图形的结构化特征数据。首先，所述方法实时监听画笔基于被选定的基础图形进行的目标图形绘制事件是否产生。接着，所述方法在监听到所述目标图形绘制事件时，在所述视频流中每帧图像各自显示时的时间点获取所述画笔在当前时间点的绘制坐标。最后，所述方法在每次获取到当前时间点的所述绘制坐标时，根据所述绘制坐标及所述被选定的基础图形的结构化特征数据，在所述画布上渲染绘制出与所述视频流在当前时间点显示的图像对应的目标图形，从而通过在与用于显示视频流的所述视频流显示窗口不在同一层面的画布上针对每帧图像绘制出对应的目标图形，达到在播放显示视频流的同时于该视频流上实现图形绘制动画效果，从而确保绘制出的目标图形能够进行交互性处理。其中因所述目标图形的绘制是基于基础图形的结构化特征数据实现的，便无需大量耗费终端设备的计算资源来从无到有地构建绘制所述目标图形，从而降低图形绘制过程的数据处理量，并相应提高数据处理效率。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。