CN110570501A - 一种线条动画绘制方法及其设备、存储介质、电子设备 - Google Patents

Abstract

本发明实施例公开一种线条动画绘制方法及其设备、存储介质、电子设备，其中方法包括如下步骤：获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；基于设定的时间间隔将所述绘制时长分割为多个时刻；在所述起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。采用本发明，可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，可以方便灵活的生成可控的线条动画。

Description

一种线条动画绘制方法及其设备、存储介质、电子设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种线条动画绘制方法及其设备、存储介质、电子设备。

背景技术

随着计算机和网络技术的发展，网页内容不断丰富化，展示效果也不断增强，在网页浏览过程中，经常会包含动画效果，如对于安全态势感知(Security SituationAwareness，SSA)的网络攻击飞线动画。

传统的网页动画生成的方法有的使用DOM节点加层叠样式表(Cascading StyleSheets，CSS)动画，由于涉及到大量DOM节点以及DOM节点操作，会造成页面重绘重排现象，且CSS动画过程不可控；有的使用gif图片，gif图片占用空间大，加载时间长，且无法控制动画状态。因此，现有技术中的线条动画存在绘制不可控的技术问题。

发明内容

本发明实施例提供了一种线条动画绘制方法及其设备、存储介质、电子设备，可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，可以方便灵活的生成可控的线条动画。

本发明实施例一方面提供一种线条动画绘制方法，可包括：

获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

基于设定的时间间隔将所述绘制时长分割为多个时刻；

在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制参数还包括线条曲率参数，所述获取在当前浏览页面的画布中所输入的绘制参数之后，还包括：

基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

所述基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述线条控制点坐标逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还包括：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，所述基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还包括：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，所述采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值，包括：

采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

可选的，所述基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点在所述多个时刻从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制时长包括第一时段和第二时段；

所述基于设定的时间间隔将所述绘制时长分割为多个时刻，包括：

基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

所述在所述起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

在所述线条起点坐标处绘制第一移动点和第二移动点；

在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

可选的，还包括：

当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

可选的，所述在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画，包括：

在所述第一时段内，获取所述多个第一时刻中各第一时刻对应的第一移动坐标；

保持所述第二移动点不动，并将所述第一移动点按照所述第一移动坐标进行移动直至所述线条终点坐标，以生成所述第一移动点对应的第一线条动画；

所述在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画，包括：

在所述第二时段内，获取所述多个第二时刻中各第二时刻对应的第二移动坐标；

保持所述第二移动点不动，并将所述第二移动点按照所述第二移动坐标进行移动直至所述线条终点坐标，以生成所述第二移动点对应的第二线条动画。

本发明实施例一方面提供一种线条动画绘制方法，可包括：

获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

基于设定的时间间隔将所述绘制时长分割为多个时刻；

在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，所述线条动画用于展示所述数据攻击应用平台的数据攻击态势。

可选的，所述绘制参数还包括线条曲率参数，所述获取在当前浏览页面的画布中所输入的绘制参数之后，还包括：

基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

所述基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述线条控制点坐标逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还包括：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，所述基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还包括：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，所述采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值，包括：

采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

可选的，所述基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点在所述多个时刻从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制时长包括第一时段和第二时段；

所述基于设定的时间间隔将所述绘制时长分割为多个时刻，包括：

基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

所述在所述起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

在所述线条起点坐标处绘制第一移动点和第二移动点；

在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

可选的，还包括：

当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

可选的，所述在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画，包括：

在所述第一时段内，获取所述多个第一时刻中各第一时刻对应的第一移动坐标；

保持所述第二移动点不动，并将所述第一移动点按照所述第一移动坐标进行移动直至所述线条终点坐标，以生成所述第一移动点对应的第一线条动画；

所述在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画，包括：

在所述第二时段内，获取所述多个第二时刻中各第二时刻对应的第二移动坐标；

保持所述第二移动点不动，并将所述第二移动点按照所述第二移动坐标进行移动直至所述线条终点坐标，以生成所述第二移动点对应的第二线条动画。

本发明实施例一方面提供一种线条动画绘制设备，可包括：

参数获取单元，用于获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

时长分割单元，用于基于设定的时间间隔将所述绘制时长分割为多个时刻；

动画绘制单元，用于在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制参数还包括线条曲率参数，还包括：

控制点计算单元，用于基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

所述动画绘制单元，具体用于：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述线条控制点坐标逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，还包括：

第一颜色赋值单元，用于计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，还包括：

第二颜色赋值单元，用于计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，所述第二颜色赋值单元，包括：

线条分割子单元，用于采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

线条赋值子单元，用于将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

可选的，所述动画绘制单元，具体用于：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制时长包括第一时段和第二时段；

所述时长分割单元，具体用于：

基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

所述动画绘制单元，包括：

移动点绘制子单元，用于在所述线条起点坐标处绘制第一移动点和第二移动点；

第一动画绘制子单元，用于在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

第二动画绘制子单元，用于在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

可选的，所述动画绘制单元，还包括：

移动点隐藏子单元，用于当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

可选的，所述第一动画绘制子单元，具体用于：

在所述第一时段内，获取所述多个第一时刻中各第一时刻对应的第一移动坐标；

保持所述第二移动点不动，并将所述第一移动点按照所述第一移动坐标进行移动直至所述线条终点坐标，以生成所述第一移动点对应的第一线条动画；

所述第二动画绘制子单元，具体用于：

在所述第二时段内，获取所述多个第二时刻中各第二时刻对应的第二移动坐标；

保持所述第二移动点不动，并将所述第二移动点按照所述第二移动坐标进行移动直至所述线条终点坐标，以生成所述第二移动点对应的第二线条动画。

本发明实施例一方面提供一种线条动画绘制设备，可包括：

参数获取单元，用于获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

时长分割单元，用于基于设定的时间间隔将所述绘制时长分割为多个时刻；

动画绘制单元，用于在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，所述线条动画用于展示所述数据攻击应用平台的数据攻击态势。

可选的，所述绘制参数还包括线条曲率参数，还包括：

控制点计算单元，用于基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

所述动画绘制单元，具体用于：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述线条控制点坐标逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，还包括：

第一颜色赋值单元，用于计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，还包括：

第二颜色赋值单元，用于计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，所述第二颜色赋值单元，包括：

线条分割子单元，用于采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

线条赋值子单元，用于将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

可选的，所述动画绘制单元，具体用于：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制时长包括第一时段和第二时段；

所述时长分割单元，具体用于：

基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

所述动画绘制单元，包括：

移动点绘制子单元，用于在所述线条起点坐标处绘制第一移动点和第二移动点；

第一动画绘制子单元，用于在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

第二动画绘制子单元，用于在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

可选的，所述动画绘制单元，还包括：

移动点隐藏子单元，用于当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

可选的，所述第一动画绘制子单元，具体用于：

在所述第一时段内，获取所述多个第一时刻中各第一时刻对应的第一移动坐标；

保持所述第二移动点不动，并将所述第一移动点按照所述第一移动坐标进行移动直至所述线条终点坐标，以生成所述第一移动点对应的第一线条动画；

所述第二动画绘制子单元，具体用于：

在所述第二时段内，获取所述多个第二时刻中各第二时刻对应的第二移动坐标；

保持所述第二移动点不动，并将所述第二移动点按照所述第二移动坐标进行移动直至所述线条终点坐标，以生成所述第二移动点对应的第二线条动画。

本发明实施例一方面提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行上述的方法步骤。

本发明实施例一方面提供一种电子设备，可包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行以下步骤：

获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

基于设定的时间间隔将所述绘制时长分割为多个时刻；

在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

在本发明实施例中，通过获取在当前浏览页面的画布中所输入的线条起点坐标、线条终点坐标以及绘制时长，并采用设定的时间间隔将绘制时长分割为多个时刻，通过调用路径绘制命令，在线条起点坐标处绘制移动点，并逐帧绘制该移动点在各时刻从线条起点坐标开始移动直至线条终点坐标的线条动画。可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，线条动画的实现过程简单快捷，可以方便灵活的生成可控的线条动画，同时，丰富了线条动画的绘制方式。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种线条动画绘制方法的流程示意图；

图2a是本发明实施例提供的一种移动点在T1时刻的移动过程示意图；

图2b是本发明实施例提供的一种移动点在T2时刻的移动过程示意图；

图2c是本发明实施例提供的一种移动点在T3时刻的移动过程示意图；

图3是本发明实施例提供的一种线条动画绘制方法的流程示意图；

图4是本发明实施例提供的一种线条动画绘制方法的流程示意图；

图5a是本发明实施例提供的一种渐变色填充后效果示意图；

图5b是本发明实施例提供的一种渐变色填充后效果示意图；

图6是本发明实施例提供的一种纯色填充后效果示意图；

图7是本发明实施例提供的一种线条动画绘制方法的流程示意图；

图8a是本发明实施例提供的一种线条动画开始时刻第一移动点和第二移动点的移动效果示意图；

图8b是本发明实施例提供的一种线条动画第一时段内第一移动点的移动效果示意图；

图8c是本发明实施例提供的一种线条动画第一时段内第一移动点的移动效果示意图；

图8d是本发明实施例提供的一种线条动画第二时段内第二移动点的移动效果示意图；

图8e是本发明实施例提供的一种线条动画结束时刻第二移动点的移动效果示意图；

图9是本发明实施例提供的一种线条动画绘制方法的流程示意图；

图10是本发明实施例提供的一种线条动画绘制方法的流程示意图；

图11是本发明实施例提供的一种线条动画绘制方法的流程示意图；

图12是本发明实施例提供的一种线条动画绘制方法的流程示意图；

图13是本发明实施例提供的一种线条动画绘制方法的应用场景示意图；

图14是本发明实施例提供的一种线条动画绘制设备的结构示意图；

图15是本发明实施例提供的一种线条动画绘制设备的结构示意图；

图16是本发明实施例提供的一种第二颜色赋值单元的结构示意图；

图17是本发明实施例提供的一种动画绘制单元的结构示意图；

图18是本发明实施例提供的一种线条动画绘制设备的结构示意图；

图19是本发明实施例提供的一种第二颜色赋值单元的结构示意图；

图20是本发明实施例提供的一种动画绘制单元的结构示意图；

图21是本发明实施例提供的一种电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

下面将结合附图1-附图13，对本发明实施例提供的线条动画绘制方法进行详细介绍。

请参见图1，为本发明实施例提供了一种线条动画绘制方法的流程示意图。如图1所示，本发明实施例的所述方法可以包括以下步骤S101-步骤S103。

S101，获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

可以理解的是，在当前浏览器的页面中设置有画图组件，通过选择该画图组件就会在当前浏览页面的设定区域创建一块画布。所述画图组件可以为Canvas组件，还可以为可缩放矢量图像(Scalable Vector Graphics，SVG)组件。

所述Canvas是在HTML5中新增的标签<canvas></canvas>用于在网页实时生成图像，可以用JavaScript脚本在画布上绘制各种图表、动画等。也就是说，Canvas通过JavaScript来绘制2D图形，并且是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制。所述HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。所述JavaScript简称JS，是一种面向对象(基于原型)的解释型语言，通过解释执行，主要运行于浏览器端和Node.js环境中。

所述SVG是一种使用XML描述2D图形的语言，用来定义用于网络的基于矢量的图形。SVG基于XML，这意味着SVG DOM中的每个元素都是可用的。可以为某个元素附加JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

同等情况下，采用SVG绘制的图像与采用Canvas绘制的图像的性能比较如表1所示，可见，采用Canvas绘制的图像比采用SVG绘制的图像性能更优。

表1

	动画帧数fps	Cpu占用率	JS Heap内存情况	说明
					SVG	12～43	高于100％	11mb左右	视觉上仔细看略有卡顿
Canvas	42～60	20％～30％	9.3mb左右	动画流畅

在本发明实施例中，优先采用Canvas绘制线条动画。采用Canvas绘图主要有三步：获取<canvas>元素对应的DOM对象，这是一个Canvas对象；调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；调用CanvasRenderingContext2D对象进行绘图。当然，本方案还可扩展至采用3D绘图协议(Web Graphics Library，WebGL)技术绘制3D对象。所述WebGL绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。

所述画布是一个矩形区域，包括id、class、style等属性，还包括高度(height)属性和宽度(width)属性。可以对画布的各属性进行设置，如<canvas id＝"canvas"width＝"400"height＝"400"></canvas>。其中，所述宽度属性可以指定为一个整数像素值或者是窗口宽度的百分比，当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉，默认值是300。所述高度属性可以指定为一个整数像素值或者是窗口高度的百分比，当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉，默认值是150。

具体的，当在所创建的画布中输入绘制参数时，或者将绘制参数传递至配置接口时，线条动画绘制设备记录所输入的绘制参数。所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长，还可包括线条曲率参数、线条绘制颜色等。其中，所述线条起点坐标是指所需绘制的线条动画的初始位置的坐标，所述线条终点坐标是指所需绘制的线条动画的最终位置的坐标，所述绘制时长是指线条动画的总持续时长，所述线条曲率参数是指线条的曲率大小，所述线条绘制颜色则是指线条动画的绘制颜色，可以为纯色，也可以为渐变色。

其中，所述线条动画绘制设备可以为用户终端，包括平板电脑、个人计算机(PC)、智能手机、掌上电脑以及移动互联网设备(MID)等具备线条动画绘制功能的终端设备；所述线条动画绘制设备还可以为具备线条动画绘制功能的服务器。

S102，基于设定的时间间隔将所述绘制时长分割为多个时刻；

具体的，通过采用设定的时间间隔将绘制时长进行分割，从而得到多个时刻，每个时刻对应一帧线条动画。例如，设定的时间间隔为0.1s，绘制时长为2s，那么分割后就得到0s、0.1s、0.2s、0.3s、…、1.8s、1.9s和2s这些时刻。

当然，还可对绘制时长进行任意分割，也可以得到多个时刻。例如，绘制时长为2s，分割后可以为0s、0.1s、0.3s、0.6s、…、2s。

优选的，若在绘制时长内分为不同的时段进行绘制，则可将绘制时长分割为多个时段，再分别对每个时段进行分割而得到多个时刻。例如，绘制时长为2s，第一时段为0-1s，第二时段为1s-2s，第一时段的第一时间间隔为0.1s，第二时段的第二时间间隔为0.2s，那么分割后得到0s、0.1s、0.2s、…、0.9s、1s、1.2s、1.4s、…、1.8s和2s。所述第一时段对应的时长和所述第二时段对应的时长可以相同，也可以不同。所述第一时段对应的第一时间间隔和所述第二时段对应的第二时间间隔可以相同，也可以不同。

S103，在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可以理解的是，所述移动点是指用于描述线条移动的点，可以为圆形、方形或三角形等各种形状，通过移动点的移动可以展现动画效果。

具体的，通过绘制不同时刻中每个时刻移动点从前一时刻所在位置到当前移动位置的线条，并组合后生成在绘制时长内移动点从线条起点坐标到线条终点坐标的动画。

例如，线条起点坐标处是B，线条终点坐标处是E，在t＝T1时刻，线条从E移动到P1，如图2a所示，在t＝T2时刻，线条移动到P2，也就是T1～T2时间段内，从P1移动到P2，如图2b，在t＝T3时刻，线条移动到P3，如图2c所示。通过展示每个时刻的绘制效果而生成线条动画。

所绘制的线条形状可以包括多种，当设置了线条的曲率时，可唯一确定线条的形状。

一种可行的实现方式为通过调用quadraticCurveTo路径绘制命令绘制线条动画，如下所示的实现代码context.beginPath()；context.moveTo(beginX，beginY)；context.quadraticCurveTo(controlX，controlY，endX，endY)；即通过调用quadraticCurveTo绘制以(controlX,controlY)为控制点，从起点(beginX，beginY)到终点(endX，endY)的线条。

可选的，还可在将绘制时长分割为多个时刻之后，计算多个时刻中各时刻的移动起点坐标和移动终点坐标之间的线条绘制颜色，然后基于所述线条绘制颜色、所述线条起点坐标、所述线条终点坐标以及所述多个时刻绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。其中，所述线条绘制颜色可以为纯色，也可以为渐变色。而线条绘制颜色可可采用strokeStyle()方法进行颜色赋值，例如，对于纯色，content.strokeStyle＝"color"；对于渐变色content.strokeStyle＝grd，而grd.addColorStop(stop，color)方法规定渐变对象中的位置和颜色，stop是位于0到1之间的值，用于对颜色填充线段分割为多个线段区间，然后在不同的线段区间赋值渐变色。

在本发明实施例中，通过获取在当前浏览页面的画布中所输入的线条起点坐标、线条终点坐标以及绘制时长，并采用设定的时间间隔将绘制时长分割为多个时刻，通过调用路径绘制命令，在线条起点坐标处绘制移动点，并逐帧绘制该移动点在各时刻从线条起点坐标开始移动直至线条终点坐标的线条动画。可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，线条动画的实现过程简单快捷，可以方便灵活的生成可控的线条动画，同时，丰富了线条动画的绘制方式。另外，不需要依赖第三方插件就可绘制线条动画，大大简化线条动画的实现复杂度且可以适配多终端设备。

请参见图3，为本发明实施例提供了一种线条动画绘制方法的流程示意图。如图3所示，本发明实施例的所述方法可以包括以下步骤S201-步骤S205。

S201，获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标、绘制时长以及线条曲率参数；

可以理解的是，在当前浏览器的页面中设置有画图组件，通过选择该画图组件就会在当前浏览页面的设定区域创建一块画布。所述画图组件可以为Canvas组件，还可以为SVG组件。

所述Canvas是在HTML5中新增的标签<canvas></canvas>用于在网页实时生成图像，可以用JavaScript脚本在画布上绘制各种图表、动画等。也就是说，Canvas通过JavaScript来绘制2D图形，并且是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制。所述HTML5是万维网的核心语言、标准通用标记语言下的一个HTML的第五次重大修改。所述JavaScript简称JS，是一种面向对象(基于原型)的解释型语言，通过解释执行，主要运行于浏览器端和Node.js环境中。

所述SVG是一种使用XML描述2D图形的语言，用来定义用于网络的基于矢量的图形。SVG基于XML，这意味着SVG DOM中的每个元素都是可用的。可以为某个元素附加JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

同等情况下，采用SVG绘制的图像与采用Canvas绘制的图像的性能比较如表1所示，采用Canvas绘制的图像比采用SVG绘制的图像性能更优。在本发明实施例中，优先采用Canvas绘制线条动画。采用Canvas上绘图主要有三步：获取<canvas>元素对应的DOM对象，这是一个Canvas对象；调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；调用CanvasRenderingContext2D对象进行绘图。当然，本方案还可扩展至采用3D绘图协议(Web Graphics Library，WebGL)技术绘制3D对象。所述WebGL绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES2.0的一个JavaScript绑定，WebGL可以为Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。

所述画布是一个矩形区域，包括id、class、style等属性，还包括高度(height)属性和宽度(width)属性。可以对画布的各属性进行设置，如<canvas id＝"canvas"width＝"400"height＝"400"></canvas>。其中，所述宽度属性可以指定为一个整数像素值或者是窗口宽度的百分比，当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉，默认值是300。所述高度属性可以指定为一个整数像素值或者是窗口高度的百分比，当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉，默认值是150。

具体的，当在所创建的画布中输入绘制参数时，或者将绘制参数传递至配置接口时，线条动画绘制设备记录所输入的绘制参数。所述绘制参数包括线条起点坐标、线条终点坐标、绘制时长以及线条曲率参数等。其中，所述线条起点坐标是指所需绘制的线条动画的初始位置begin_point的坐标(beginX，beginY)，所述线条终点坐标是指所需绘制的线条动画的最终位置end_point的坐标(endX，endY)，所述绘制时长是指线条动画的总持续时长total_time，所述线条曲率参数是指线条的曲率大小(a，b)。

其中，所述线条动画绘制设备可以为用户终端，包括平板电脑、个人计算机(PC)、智能手机、掌上电脑以及移动互联网设备(MID)等具备线条动画绘制功能的终端设备；所述线条动画绘制设备还可以为具备线条动画绘制功能的服务器。

S202，基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

假设线条控制点为control_point，对应的控制点坐标为(controlX,controlY)，根据线条起点坐标、所述线条终点坐标以及所述线条曲率参数可计算得到控制点坐标为controlX＝(beginX+endX)/a，controlY＝(beginY+endY)/b。

需要说明的是，所述线条控制点的个数与线条函数表达式相关联。例如，若线条函数表达式为二次贝塞尔曲线B(t)＝(1-t)^2*begin_point+2*t*(1-t)*control_point+t^2*end_point，则线条控制点只包括一个control_point，若线条函数表达式为三次贝塞尔曲线B(t)＝(1-t)^3*begin_point+3*t*(1-t)^2*control_point1+3*t^2*(1-t)*control_point2+t^3*end_point，则线条控制点包括两个control_point1和control_point 2。

S203，基于设定的时间间隔将所述绘制时长分割为多个时刻；

具体的，通过采用设定的时间间隔将绘制时长进行分割，从而得到多个时刻，每个时刻对应一帧线条动画。例如，假设设定的时间间隔为t0，则将total_time分割为0、t0、2t0、3t0、…、total_time多个时刻，对应的时间段分别为：0～t0、t0～2t0、2t0～3t0、…、nt0～total_time。

当然，还可对绘制时长进行任意分割，也可以得到多个时刻。例如，绘制时长为total_time，分割后可以为0、t0、3t0、5t0、…、total_time。

S204，计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可以理解的是，在线条绘制颜色中包括有多个颜色，每两个颜色之间构成颜色区间。例如，红色～绿色为一个颜色区间，绿色～黄色为另一个颜色区间。

所述移动起点坐标可以为线条起点坐标，也可以为当前时刻的前一个时间间隔移动点的坐标，所述移动终点坐标为当前时刻移动点的坐标。例如，当前时刻为t＝3t0，那么移动起点坐标可以是begin_point处的坐标，也可以是t＝2t0时刻移动点的坐标，而移动终点坐标为t＝3t0时刻移动点的坐标。

具体的，在将所述多个颜色区间赋值给移动起点坐标和移动终点坐标之间的线条时，可以是赋值给线条起点坐标到当前移动终点坐标之间的线条，也可以是赋值给当前时刻的前一时间间隔处的坐标到当前移动终点坐标之间的线条。例如，如图2c所示，若当前时刻为t＝T3，对应的移动坐标处为P3，前一时间间隔为t＝T2，对应的移动坐标处为P2，那么，在获取到颜色区间后，可将该颜色区间赋值给BP3，并可覆盖前一时刻已赋值的BP2，还可以将颜色区间赋值为P2P3。

需要说明的是，由于线条动画的绘制是以一帧一帧图像的绘制进行拼接后的结果，因此，对于线条动画的颜色赋值也是以每帧图像进行计算得到。以上所描述的颜色赋值过程都是以当前帧(当前时刻)进行说明，其余帧图像均可采用相同的方式实现颜色赋值。

在一种具体的实现方式中，如图4所示，所述采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值，可以包括以下步骤：

S301，采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

可以理解的是，可采用addColorStop()方法设置分割点的位置，从而对移动起点坐标和移动终点坐标之间的线条进行分割，而得到多个线条区间。

所述addColorStop()方法规定渐变对象中的颜色和位置，具体表达形式为grd.addColorStop(stop，color)；其中，stop是介于0与1之间的值，表示渐变开始与结束之间的位置，color表示在stop位置显示的CSS颜色值。

若设置的分割点包括stop1、stop2、…、stopn共n个点，那么，采用分割点将移动起点坐标和所述移动终点坐标之间的线条分割为0～stop1、stop1～stop2、stop2～stop3、…、stopn～stop1多个线条区间。

S302，将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

例如，设置grd.addColorStop(0，"#ffffff")；grd.addColorStop(stop，"#00ffe7")；grd.addColorStop(1，"#ffffff")；那么在线条的起点位置0赋值"#ffffff"颜色，在分割点位置stop赋值"#00ffe7"颜色，在线条的终点位置1赋值"#ffffff"颜色，而在0～stop区间赋值"#ffffff"～"#00ffe7"的渐变色，在stop～1区间赋值"#00ffe7"～"#ffffff"的渐变色，其对应的可行实现代码如下：

例如，设置grd.addColorStop(0，"black")；grd.addColorStop(1，"white")；对应的颜色填充效果如图5a所示。设置grd.addColorStop(0，"black")；grd.addColorStop("0.3"，"magenta")；grd.addColorStop("0.5"，"blue")；grd.addColorStop("0.6"，"green")；grd.addColorStop("0.8","yellow")；grd.addColorStop(1，"red")；对应的颜色填充效果如图5b所示。

可选的，计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

具体的，对移动起点坐标和所述移动终点坐标之间的线条可采用纯色赋值，例如content.strokeStyle＝"#FF5D43"；对应的填充效果如图6所示。那么采用赋值颜色填充后，这一段线条显示颜色相同。当然，对于不同时刻的线条可采用相同的颜色赋值，也可采用不同的颜色赋值。

S205，在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标、所述线条控制点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可以理解的是，所述移动点是指用于描述线条移动的点，可以为圆形、方形或三角形等各种形状，通过移动点的移动可以展现动画效果。

所绘制的线条可由线条起点坐标、线条终点坐标以及线条控制点坐标唯一确定，即将线条起点坐标、线条终点坐标以及线条控制点坐标分别代入至线条函数中，就可得到移动点坐标关于时刻t的函数表达式，再将多个时刻分别代入至该函数表达式中，从而可以得到各时刻的移动点坐标，将移动点依次按照这些移动点坐标进行移动直至到达线条终点坐标处。所绘制的线条函数可以为二次贝塞尔曲线函数实现曲线飞线绘制、线性差值函数实现直线型飞线绘制，使用三方贝塞尔曲线函数或其他路径实现丰富的飞线曲线绘制，从而实现不同的飞线动画呈现效果。

具体的，通过绘制不同时刻中每个时刻移动点从前一时间间隔时刻所在位置到当前时刻移动位置的线条，并组合后生成在绘制时长内移动点从线条起点坐标到线条终点坐标的动画。

例如，线条函数为二次贝塞尔曲线函数B(t)＝(1-t)^2*begin_point+2*t*(1-t)*control_point+t^2*end_point，其中0<t<total_time，对绘制时长分割后的多个时刻分别为0、T1、T2、T3、…、Tn、total_time，移动点为P，在t＝0时，移动点在线条起点begin_point处P0X＝beginX，P0Y＝beginY，在t＝T1时，移动到P1，P1X＝(1-T1)^2*beginX+2*T1*(1-T1)*controlX+T1^2*endX，P1Y＝(1-T1)^2*beginY+2*T1*(1-T1)*controlY+T1^2*endY，在T2时刻移动到P2，P2X＝(1-T2)^2*beginX+2*T2*(1-T2)*controlX+T2^2*endX，P2Y＝(1-T2)^2*beginY+2*T2*(1-T2)*controlY+T2^2*endY，…，并在t＝total_time时，移动到线条终点end_point处，PEX＝endX，PEY＝endY。将移动点P依次按照begin_point、P1、P2、…、end_point匀速移动，同时，基于各时刻所赋值的颜色进行绘制，从而得到二次贝塞尔飞线动画。

进一步的，所述绘制时长包括第一时段和第二时段，请参见图7：

S401，基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

假设绘制时长为total_time，第一时段为0～total_time/2，第二时段为total_time/2～total_time。第一时段的第一时间间隔为t1，第二时段的第二时间间隔为t2。将第一时段可分割为0、t1、2t1、…、total_time/2多个第一时刻，将第二时段可分割为total_time/2、t2、2t2、…、total_time。所述t1和t2可以相同，可以不同。

S402，在所述线条起点坐标处绘制第一移动点和第二移动点；

可以理解的是，所述第一移动点和所述第二移动点分别用于描述第一时段内线条移动的点和第二时段内线条移动的点，可以为圆形、方形或三角形等各种形状。也就是说，通过在绘制时长内分别通过第一移动点和所述第二移动点的移动可以展现完整的动画效果。

如图8a所示，线条起点为begin_point，线条终点为end_point。若t＝0为动画的开始时刻，表示动画开始，此时在begin_point和end_point坐标绘制不同填充色的圆形图案(BeginArc，EndArc)，分别表示线条起始和线条终点；同时，在begin_point坐标处绘制第一移动点P1和第二移动点P2。

S403，在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

具体实现中，在第一时段0<t<(total_time/2)时，获取所述多个第一时刻中各第一时刻对应的第一移动坐标，保持所述第二移动点不动，并将所述第一移动点按照所述第一移动坐标进行移动直至所述线条终点坐标，以生成所述第一移动点对应的第一线条动画。

例如，如图8b所示，线条函数为二次贝塞尔曲线函数B(t)＝(1-t)^2*begin_point+2*t*(1-t)*control_point+t^2*end_point，其中0<t<total_time，飞线起点begin_point坐标为(beginX，beginY)，飞线终点end_point坐标为(endX，endY)，控制点坐标为(controlX，controlY)。当0<t<(total_time/2)时，P1在各时刻的移动终点坐标为Ex＝(1-t)^2*beginX+2*t*(1-t)*controlX+t^2*endX，Ey＝(1-t)^2*beginY+2*t*(1-t)*controlY+t^2*endY，通过更新时刻t值，P1依次向飞线终点坐标处移动，从而实现P1前进的动画效果，此过程描述光点的出现过程。

当t＝(total_time/2)时，如图8c所示，P1与end_point重合，P1到达终点，第一时段的飞线绘制完成。

优选的，可对各时刻的飞线进行着色，如线性渐进着色或者纯色着色。所述着色方法可参见S204，此处不再赘述。

S404，在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

具体实现中，在第二时段(total_time/2)<t<total_time时，获取所述多个第二时刻中各第二时刻对应的第二移动坐标，保持所述第二移动点不动，并将所述第二移动点按照所述第二移动坐标进行移动直至所述线条终点坐标，以生成所述第二移动点对应的第二线条动画。

例如，如图8d所示，当total_time/2<t<total_time时，P2在各时刻的移动终点坐标为

Bx＝(1-(t-total_time/2))^2*beginX+2*(t-total_time/2)*(1-(t-total_time/2))*controlX+(t-total_time/2)^2*endX，

By＝(1-(t-total_time/2))^2*beginY+2*(t-total_time/2)*(1-(t-total_time/2))*controlY+(t-total_time/2)^2*endY，通过更新时刻t值，P2依次向飞线终点坐标处移动，从而实现P2前进的动画效果，此过程描述光点的消失过程。

优选的，可对各时刻的飞线进行着色，如线性渐进着色或者纯色着色。所述着色方法可参见S204，此处不再赘述。

S405，当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

当t＝(total_time)，如图8e所示，P1、P2均与end_point重叠，此时隐藏起点与终点标注圆形图案(BeginArc,EndArc)，同时，隐藏P1和P2的图案，光点消失，飞线动画结束。

在本发明实施例中，通过获取在当前浏览页面的画布中所输入的线条起点坐标、线条终点坐标以及绘制时长，并采用设定的时间间隔将绘制时长分割为多个时刻，同时，计算在各时刻线条的绘制颜色以对线条进行渐进颜色赋值，通过调用路径绘制命令，在线条起点坐标处绘制移动点，并采用所赋值的渐进颜色绘制该移动点在不同时段的各时刻从线条起点坐标开始移动直至线条终点坐标的线条动画。可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，线条动画的实现过程简单快捷，可以方便灵活的生成可控的线条动画，同时，通过渐进色绘制并展现移动点的出现和消失过程，丰富了线条动画的绘制方式以及绘制效果。另外，不需要依赖第三方插件就可绘制线条动画，大大简化线条动画的实现复杂度且可以适配多终端设备。

请参见图9，为本发明实施例提供了一种线条动画绘制方法的流程示意图。如图9所示，本发明实施例的所述方法可以包括以下步骤S501-步骤S503。

S501，获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

S502，基于设定的时间间隔将所述绘制时长分割为多个时刻；

S503，在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，所述线条动画用于展示所述数据攻击应用平台的数据攻击态势。

具体的，所述数据攻击应用平台可以为SSA平台。通过网页浏览应用(如浏览器)打开该数据攻击应用平台对应的网页，由用户在网页的画布中输入线条起点坐标、线条终点坐标以及绘制时长等绘制参数或者在打开网页时通过数据接口导入绘制参数，线条动画绘制设备在读取到绘制参数后，首先将其中的绘制时长分割为多个时刻以便于后续根据这多个时刻中的每个时刻进行绘制，然后开始绘制线条动画。先在线条起点坐标处绘制移动点，再绘制多个时刻中最开始时刻时移动点从线条起点到该时刻的第一帧线条，然后继续绘制下一时刻移动点从当前时刻到下一时刻的第二帧线条，依此方法逐帧绘制所有帧线条，从而形成线条动画并展示，而该线条动画的移动过程则描述了该数据攻击应用平台的数据攻击态势。

在本发明实施例中，通过获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数后，对其中的绘制时长进行分割而得到多个时刻，再通过调用路径绘制命令，在线条起点坐标处绘制移动点，并逐帧绘制该移动点在各时刻从线条起点坐标开始移动直至线条终点坐标的线条动画，同时将所绘制的线条动画在该浏览页面进行展示。用户可通过所展示的线条动画知晓该平台的数据攻击态势情况，如影响范围、攻击路径、攻击目的、攻击手段等，以便采取相应的决策和响应，提高该平台的数据安全防护水平。

请参见图10，为本发明实施例提供了一种线条动画绘制方法的流程示意图。如图10所示，本发明实施例的所述方法可以包括以下步骤S601-步骤S605。

S601，获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标、绘制时长以及线条曲率参数；

S602，基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

S603，基于设定的时间间隔将所述绘制时长分割为多个时刻；

S604，计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

在一种具体的实现方式中，如图11所示，所述采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值，可以包括以下步骤：

S701，采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

S702，将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

其中，S701～S702的具体描述请参见S301～S302，此处不再赘述。

S605，在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标、所述线条控制点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，所述线条动画用于展示所述数据攻击应用平台的数据攻击态势。

其中，S601～S605的具体描述请参见S201～S205，此处不再赘述。

进一步的，所述绘制时长包括第一时段和第二时段，请参见图12：

S801，基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

S802，在所述线条起点坐标处绘制第一移动点和第二移动点；

S803，在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

S804，在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

S805，当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

其中，S801～S805的具体描述请参见S401～S405，此处不再赘述。

在本发明实施例中，通过获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数后，对其中的绘制时长进行分割而得到多个时刻，再通过调用路径绘制命令，在线条起点坐标处绘制移动点，并逐帧绘制该移动点在各时刻从线条起点坐标开始移动直至线条终点坐标的线条动画，同时将所绘制的线条动画在该浏览页面进行展示。可以直接基于数据攻击应用平台的绘制参数在数据攻击应用平台对应的网页中的画布上绘制线条的出现动画和消失动画，绘制过程简单快捷，可以方便灵活的生成可控的线条动画，同时，用户可通过所展示的线条动画知晓该平台的数据攻击态势情况，如影响范围、攻击路径、攻击目的、攻击手段等，以便采取相应的决策和响应，提高该平台的数据安全防护水平。

请参见图13，为本发明实施例提供了一种线条动画绘制方法的场景示意图。如图13所示，本发明实施例具体以一安全态势感知场景对线条动画绘制方法进行介绍。

SSA是一款安全大数据可视平台，可提供业务和资产可视、威胁和风险可视。通过对海量数据进行多维、智能的持续分析，发现潜在的外部和内部的风险，预测即将发生的安全威胁。

为了展示资源面临的实时大盘攻击态势情况，线条动画绘制设备获取在当前浏览页面的画布中所输入的绘制参数，或者通过接口调用绘制参数，如线条起点坐标(如图9所示的攻击起点1的坐标和攻击起点2的坐标)、线条终点坐标(如图9所示的攻击终点的坐标)、绘制时长(攻击起点1到攻击终点的动画总绘制时长或者攻击起点2到攻击终点的动画总绘制时长)、线条曲率参数等，再根据线条起点坐标、线条终点坐标以及线条曲率参数计算线条控制点坐标；基于设定的时间间隔将绘制时长分割为多个时刻，再采用设定的分割点将当前时刻对应的移动起点坐标和移动终点坐标之间的线条分割为多个线条区间，并将设定的线条绘制颜色所指示的多个颜色区间分别赋值给这多个线条区间，最后调用路径绘制命令，在线条起点(攻击起点1或攻击起点2)坐标处绘制移动点，再采用所赋值的颜色分别绘制移动点在不同时刻的移动过程，并在移动点到达线条终点坐标处时形成线条动画。通过对攻击对象采用线条动画可视化，使得用户能够及时发现各种攻击威胁与异常，可以对威胁相关的影响范围、攻击路径、目的、手段进行快速判别，从而支撑有效的安全决策和响应，并且能够建立安全预警机制，来完善风险控制、应急响应和整体安全防护的水平。

下面将结合附图14-附图21，对本发明实施例提供的线条动画绘制设备进行详细介绍。需要说明的是，附图14-附图21所示的设备，用于执行本发明图1-图13所示实施例的方法，为了便于说明，仅示出了与本发明实施例相关的部分，具体技术细节未揭示的，请参照本发明图1-图13所示的实施例。

请参见图14，为本发明实施例提供了一种线条动画绘制设备的结构示意图。如图14所示，本发明实施例的所述线条动画绘制1可以包括：参数获取单元11、时长分割单元12和动画绘制单元13。

参数获取单元11，用于获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

时长分割单元12，用于基于设定的时间间隔将所述绘制时长分割为多个时刻；

动画绘制单元13，用于在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

在本发明实施例中，通过获取在当前浏览页面的画布中所输入的线条起点坐标、线条终点坐标以及绘制时长，并采用设定的时间间隔将绘制时长分割为多个时刻，通过调用路径绘制命令，在线条起点坐标处绘制移动点，并逐帧绘制该移动点在各时刻从线条起点坐标开始移动直至线条终点坐标的线条动画。可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，线条动画的实现过程简单快捷，可以方便灵活的生成可控的线条动画，同时，丰富了线条动画的绘制方式。另外，不需要依赖第三方插件就可绘制线条动画，大大简化线条动画的实现复杂度且可以适配多终端设备。

请参见图15，为本发明实施例提供了一种线条动画绘制设备的结构示意图。如图15所示，本发明实施例的所述线条动画绘制1可以包括：参数获取单元11、时长分割单元12、动画绘制单元13、控制点计算单元14、第一颜色赋值单元15和第二颜色赋值单元16。

参数获取单元11，用于获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

时长分割单元12，用于基于设定的时间间隔将所述绘制时长分割为多个时刻；

动画绘制单元13，用于在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制参数还包括线条曲率参数，还包括：

控制点计算单元14，用于基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

所述动画绘制单元13，具体用于：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述线条控制点坐标逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，还包括：

第一颜色赋值单元15，用于计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，还包括：

第二颜色赋值单元16，用于计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，如图16所示，所述第二颜色赋值单元16，包括：

线条分割子单元161，用于采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

线条赋值子单元162，用于将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

进一步的，所述动画绘制单元13，具体用于：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制时长包括第一时段和第二时段；

所述时长分割单元12，具体用于：

基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

可选的，如图17所示，所述动画绘制单元13，包括：

移动点绘制子单元131，用于在所述线条起点坐标处绘制第一移动点和第二移动点；

第一动画绘制子单元132，用于在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

可选的，所述第一动画绘制子单元132，具体用于：

在所述第一时段内，获取所述多个第一时刻中各第一时刻对应的第一移动坐标；

保持所述第二移动点不动，并将所述第一移动点按照所述第一移动坐标进行移动直至所述线条终点坐标，以生成所述第一移动点对应的第一线条动画；

第二动画绘制子单元133，用于在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

可选的，所述第二动画绘制子单元133，具体用于：

在所述第二时段内，获取所述多个第二时刻中各第二时刻对应的第二移动坐标；

保持所述第二移动点不动，并将所述第二移动点按照所述第二移动坐标进行移动直至所述线条终点坐标，以生成所述第二移动点对应的第二线条动画。

可选的，如图17所示，所述动画绘制单元13还包括：

移动点隐藏子单元134，用于当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

在本发明实施例中，通过获取在当前浏览页面的画布中所输入的线条起点坐标、线条终点坐标以及绘制时长，并采用设定的时间间隔将绘制时长分割为多个时刻，同时，计算在各时刻线条的绘制颜色以对线条进行渐进颜色赋值，通过调用路径绘制命令，在线条起点坐标处绘制移动点，并采用所赋值的渐进颜色绘制该移动点在不同时段的各时刻从线条起点坐标开始移动直至线条终点坐标的线条动画。可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，线条动画的实现过程简单快捷，可以方便灵活的生成可控的线条动画，同时，通过渐进色绘制并展现移动点的出现和消失过程，丰富了线条动画的绘制方式以及绘制效果。另外，不需要依赖第三方插件就可绘制线条动画，大大简化线条动画的实现复杂度且可以适配多终端设备。

请参见图18，为本发明实施例提供了一种线条动画绘制设备的结构示意图。如图18所示，本发明实施例的所述线条动画绘制2可以包括：参数获取单元21、时长分割单元22、动画绘制单元23、控制点计算单元24、第一颜色赋值单元25和第二颜色赋值单元26。

参数获取单元21，用于获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

时长分割单元22，用于基于设定的时间间隔将所述绘制时长分割为多个时刻；

动画绘制单元23，用于在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，所述线条动画用于展示所述数据攻击应用平台的数据攻击态势。

可选的，所述绘制参数还包括线条曲率参数，还包括：

控制点计算单元24，用于基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

所述动画绘制单元23，具体用于：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述线条控制点坐标逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，还包括：

第一颜色赋值单元25，用于计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，还包括：

第二颜色赋值单元26，用于计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

可选的，如图19所示，所述第二颜色赋值单元26，包括：

线条分割子单元261，用于采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

线条赋值子单元262，用于将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

进一步的，所述动画绘制单元23，具体用于：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

可选的，所述绘制时长包括第一时段和第二时段；

所述时长分割单元22，具体用于：

基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

可选的，如图20所示，所述动画绘制单元23，包括：

移动点绘制子单元231，用于在所述线条起点坐标处绘制第一移动点和第二移动点；

第一动画绘制子单元232，用于在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

可选的，所述第一动画绘制子单元232，具体用于：

在所述第一时段内，获取所述多个第一时刻中各第一时刻对应的第一移动坐标；

保持所述第二移动点不动，并将所述第一移动点按照所述第一移动坐标进行移动直至所述线条终点坐标，以生成所述第一移动点对应的第一线条动画；

第二动画绘制子单元233，用于在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

可选的，所述第二动画绘制子单元233，具体用于：

在所述第二时段内，获取所述多个第二时刻中各第二时刻对应的第二移动坐标；

保持所述第二移动点不动，并将所述第二移动点按照所述第二移动坐标进行移动直至所述线条终点坐标，以生成所述第二移动点对应的第二线条动画。

可选的，如图20所示，所述动画绘制单元23还包括：

移动点隐藏子单元234，用于当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

在本发明实施例中，通过获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数后，对其中的绘制时长进行分割而得到多个时刻，再通过调用路径绘制命令，在线条起点坐标处绘制移动点，并逐帧绘制该移动点在各时刻从线条起点坐标开始移动直至线条终点坐标的线条动画，同时将所绘制的线条动画在该浏览页面进行展示。可以直接基于数据攻击应用平台的绘制参数在数据攻击应用平台对应的网页中的画布上绘制线条的出现动画和消失动画，绘制过程简单快捷，可以方便灵活的生成可控的线条动画，同时，用户可通过所展示的线条动画知晓该平台的数据攻击态势情况，如影响范围、攻击路径、攻击目的、攻击手段等，以便采取相应的决策和响应，提高该平台的数据安全防护水平。

本发明实施例还提供了一种计算机存储介质，所述计算机存储介质可以存储有多条指令，所述指令适于由处理器加载并执行如上述图1-图13所示实施例的方法步骤，具体执行过程可以参见图1-图13所示实施例的具体说明，在此不进行赘述。

请参见图21，为本发明实施例提供了一种电子设备的结构示意图。如图21所示，所述电子设备1000可以包括：至少一个处理器1001，例如CPU，至少一个网络接口1004，用户接口1003，存储器1005，至少一个通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。其中，用户接口1003可以包括显示屏(Display)、摄像头(Camera)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。存储器1005可选的还可以是至少一个位于远离前述处理器1001的存储装置。如图21所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及线条动画绘制应用程序。

在图21所示的电子设备1000中，用户接口1003主要用于为用户提供输入的接口，获取用户输入的数据；而处理器1001可以用于调用存储器1005中存储的线条动画绘制应用程序，并具体执行以下操作：

获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

基于设定的时间间隔将所述绘制时长分割为多个时刻；

在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

在一个实施例中，所述绘制参数还包括线条曲率参数，所述处理器1001在执行获取在当前浏览页面的画布中所输入的绘制参数之后，还执行以下操作：

基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

所述处理器1001在执行基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画时，具体执行以下操作：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述线条控制点坐标逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

在一个实施例中，所述处理器1001在执行基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还执行以下操作：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

在一个实施例中，所述处理器1001在执行所述基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还执行以下操作：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

在一个实施例中，所述处理器1001在执行采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值时，具体执行以下操作：

采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

在一个实施例中，所述处理器1001在执行基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点在所述多个时刻从所述线条起点坐标移动至所述线条终点坐标的线条动画时，具体执行以下操作：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

在一个实施例中，所述绘制时长包括第一时段和第二时段，所述处理器1001在执行基于设定的时间间隔将所述绘制时长分割为多个时刻时，具体执行以下操作：

基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

所述处理器1001在执行在所述起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画时，具体执行以下操作：

在所述线条起点坐标处绘制第一移动点和第二移动点；

在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

在一个实施例中，所述处理器1001还执行以下操作：

当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

在一个实施例中，所述处理器1001在执行在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画时，具体执行以下操作：

在所述第一时段内，获取所述多个第一时刻中各第一时刻对应的第一移动坐标；

保持所述第二移动点不动，并将所述第一移动点按照所述第一移动坐标进行移动直至所述线条终点坐标，以生成所述第一移动点对应的第一线条动画；

所述处理器1001在执行在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画时，具体执行以下操作：

在所述第二时段内，获取所述多个第二时刻中各第二时刻对应的第二移动坐标；

保持所述第二移动点不动，并将所述第二移动点按照所述第二移动坐标进行移动直至所述线条终点坐标，以生成所述第二移动点对应的第二线条动画。

在本发明实施例中，通过获取在当前浏览页面的画布中所输入的线条起点坐标、线条终点坐标以及绘制时长，并采用设定的时间间隔将绘制时长分割为多个时刻，同时，计算在各时刻线条的绘制颜色以对线条进行渐进颜色赋值，通过调用路径绘制命令，在线条起点坐标处绘制移动点，并采用所赋值的渐进颜色绘制该移动点在不同时段的各时刻从线条起点坐标开始移动直至线条终点坐标的线条动画。可以直接基于所输入的绘制参数在网页中所创建的画布上绘制线条动画，线条动画的实现过程简单快捷，可以方便灵活的生成可控的线条动画，同时，通过渐进色绘制并展现移动点的出现和消失过程，丰富了线条动画的绘制方式以及绘制效果。另外，不需要依赖第三方插件就可绘制线条动画，大大简化线条动画的实现复杂度且可以适配多终端设备。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (13)

1.一种线条动画绘制方法，其特征在于，包括：

获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

基于设定的时间间隔将所述绘制时长分割为多个时刻；

在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

2.根据权利要求1所述的方法，其特征在于，所述绘制参数还包括线条曲率参数，所述获取在当前浏览页面的画布中所输入的绘制参数之后，还包括：

基于所述线条起点坐标、所述线条终点坐标以及所述线条曲率参数计算线条控制点坐标；

所述基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述线条控制点坐标逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

3.根据权利要求1所述的方法，其特征在于，所述基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还包括：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

4.根据权利要求1所述的方法，其特征在于，所述基于设定的时间间隔将所述绘制时长分割为多个时刻之后，还包括：

计算所述移动点在所述多个时刻中各时刻的移动起点坐标和移动终点坐标，并采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值。

5.根据权利要求4所述的方法，其特征在于，所述采用设定的线条绘制颜色所指示的多个颜色区间分别对所述移动起点坐标和所述移动终点坐标之间的线条进行颜色赋值，包括：

采用设定的分割点将所述移动起点坐标和所述移动终点坐标之间的线条分割为多个线条区间；

将所述线条绘制颜色所指示的多个颜色区间分别赋值给所述多个线条区间。

6.根据权利要求3或4所述的方法，其特征在于，所述基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点在所述多个时刻从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

基于所述线条起点坐标、所述线条终点坐标、所述多个时刻以及所述多个时刻中各时刻的颜色赋值逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

7.根据权利要求1所述的方法，其特征在于，所述绘制时长包括第一时段和第二时段；

所述基于设定的时间间隔将所述绘制时长分割为多个时刻，包括：

基于设定的第一时间间隔将所述第一时段分割为多个第一时刻，并基于设定的第二时间间隔将所述第二时段分割为多个第二时刻；

所述在所述起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，包括：

在所述线条起点坐标处绘制第一移动点和第二移动点；

在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画；

在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画。

8.根据权利要求7所述的方法，其特征在于，还包括：

当所述第一移动点和所述第二移动点均到达所述线条终点坐标处时，隐藏所述第一移动点和所述第二移动点。

9.根据权利要求7所述的方法，其特征在于，所述在所述第一时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第一时刻逐帧绘制所述第一移动点从所述线条起点坐标移动至所述线条终点坐标的第一线条动画，包括：

在所述第一时段内，获取所述多个第一时刻中各第一时刻对应的第一移动坐标；

保持所述第二移动点不动，并将所述第一移动点按照所述第一移动坐标进行移动直至所述线条终点坐标，以生成所述第一移动点对应的第一线条动画；

所述在所述第二时段内，基于所述线条起点坐标、所述线条终点坐标以及所述多个第二时刻逐帧绘制所述第二移动点从所述线条起点坐标移动至所述线条终点坐标的第二线条动画，包括：

在所述第二时段内，获取所述多个第二时刻中各第二时刻对应的第二移动坐标；

保持所述第二移动点不动，并将所述第二移动点按照所述第二移动坐标进行移动直至所述线条终点坐标，以生成所述第二移动点对应的第二线条动画。

10.一种线条动画绘制方法，其特征在于，包括：

获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

基于设定的时间间隔将所述绘制时长分割为多个时刻；

在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，所述线条动画用于展示所述数据攻击应用平台的数据攻击态势。

11.根据权利要求10所述的方法，其特征在于，还包括如权利要求2-9中任一项所述的方法。

12.一种线条动画绘制设备，其特征在于，包括：

参数获取单元，用于获取在当前浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

时长分割单元，用于基于设定的时间间隔将所述绘制时长分割为多个时刻；

动画绘制单元，用于在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画。

13.一种线条动画绘制设备，其特征在于，包括：

参数获取单元，用于获取在数据攻击应用平台对应的浏览页面的画布中所输入的绘制参数，所述绘制参数包括线条起点坐标、线条终点坐标以及绘制时长；

时长分割单元，用于基于设定的时间间隔将所述绘制时长分割为多个时刻；

动画绘制单元，用于在所述线条起点坐标处绘制移动点，基于所述线条起点坐标、所述线条终点坐标以及所述多个时刻逐帧绘制所述移动点从所述线条起点坐标移动至所述线条终点坐标的线条动画，所述线条动画用于展示所述数据攻击应用平台的数据攻击态势。