CN108133506A - 实现线条动态效果的方法、装置及*** - Google Patents

Abstract

本发明公开了一种实现线条动态效果的方法、装置及***，涉及互联网技术领域，为解决线条动态效果不流畅的问题而发明。本发明的方法包括：通过执行线条绘制脚本进行下述操作：在浏览器页面底层初始化一张目标画布；在所述目标画布上逐帧绘制各图像帧相对前一图像帧变化的图像点。本发明能够减少浏览器线程对***资源的需求，提高线条动态效果的流畅性。

Description

实现线条动态效果的方法、装置及***

技术领域

本发明涉及互联网技术领域，尤其涉及一种实现线条动态效果的方法、装置及***。

背景技术

在图表中使用具有动态效果的线条描绘数据对象的发展趋势，可以直观、生动的对数据信息进行表达。例如在图1a所示的航班图表中，当需要表达从台湾到北京的飞行方向时，可以以台湾为起点、北京为终点生成一条射线，该射线从起点位置逐渐发展延伸至终点位置，从而形成动态效果。

在绘制射线时，浏览器需要基于层叠样式表(Cascading Style Sheets，简称CSS)技术，设置超文本标记语言(HyperText Markup Language，简称HTML)页面上显示的节点，然后建立对应节点的可缩放矢量图形(Scalable Vector Graphics，简称SVG)格式的标签。通过对节点标签的控制改变节点的位置、大小、颜色等属性，从而实现一个完整的动态效果。例如在图1b中，对于一条由多个节点组成的线条MN，如果需要对节点进行改动，例如通过增加节点实现线条延长的效果，那么浏览器会在当前图像帧中根据已有的标签分别绘制各个节点，然后在下一图像帧中新建一个节点标签，并在该图像帧中绘制新建节点以及前一图像帧中绘制过的已有节点。通过图像帧的逐帧绘制，实现线条延伸的动态效果。

在上述实现过程中发明人发现：SVG技术直接在HTML页面上进行节点绘制，当标签建立后，节点即存在于HTML页面上。每当有节点发生数量、位置或颜色上的变化时，不论是的变化的节点还是未变化的节点，浏览器都需要在HTML页面上对所有节点进行重新绘制。实际应用中，组成线条的节点数量非常之多，每一帧都要绘制全部节点会占用大量的***处理资源，当在处理性能较差的设备上展示动态线条时，动画容易出现卡顿甚至掉帧的现象，影响线条的展示效果。例如假设一个线条由1000个节点组成，浏览器通过每帧增加一个节点的方式展示线条延伸效果，那么在第一帧中浏览器需要绘制第一个节点，在第二帧中浏览器除了需要绘制新出现的第二个节点外，还需要将此前绘制的第一个节点重新绘制一遍，与此类似的，在绘制后续图像帧中浏览器绘制的节点数量不断递增。在从0个节点绘制到1000个节点的过程中，通过等差数列求和公式可以计算得到，浏览器在1000个图像帧中总共需要绘制(1+1000)*1000/2＝500500个节点，这种资源开销会对***性能造成严重影响，从而影响线条动态效果的流畅度。

发明内容

本发明实施例提供了一种实现线条动态效果的方法、装置及***，能够解决线条动态效果不流畅的问题。

第一方面，本发明实施例提供了一种实现线条动态效果的方法，该方法用于实现烟花燃放的动态效果，该方法包括：

通过执行线条绘制脚本进行下述操作：

从存储队列中读取各个信息节点记录的图像点配置参数，一个信息节点对应一个线条的绘制，每个图像点配置参数中的线条起点坐标相同，线条终点坐标随机生成，图像点位置参数在每变换一个图像帧时进行一次更新；

根据图像点配置参数计算各个线条对应当前图像帧的图像点坐标；

根据图像点坐标在目标画布上绘制对应当前图像帧的图像点；

重复上述读取、计算、绘制的步骤，并当线条绘制完毕时删除线条对应的信息节点。

第二方面，本发明实施例还提供了一种实现线条动态效果的方法，该方法包括：

通过执行线条绘制脚本进行下述操作：

读取对应当前图像帧的图像点配置参数，图像点配置参数中的图像点位置参数在每变换一个图像帧时进行一次更新；

根据图像点配置参数计算对应当前图像帧的图像点坐标；

根据图像点坐标在目标画布上绘制对应当前图像帧的图像点；

重复上述读取、计算、绘制的步骤直至完成线条的绘制。

第三方面，本发明实施例还提供了一种实现线条动态效果的方法，该方法包括：

通过执行线条绘制脚本进行下述操作：

在浏览器页面底层初始化一张目标画布；

在目标画布上逐帧绘制各图像帧相对前一图像帧变化的图像点。

第四方面，本发明实施例还提供了一种实现线条动态效果的装置，该装置用于通过执行线条绘制脚本实现烟花燃放的动态效果，该装置包括：

读取单元，用于从存储队列中读取各个信息节点记录的图像点配置参数，一个信息节点对应一个线条的绘制，每个图像点配置参数中的线条起点坐标相同，线条终点坐标随机生成，图像点位置参数在每变换一个图像帧时进行一次更新；

计算单元，用于根据图像点配置参数计算各个线条对应当前图像帧的图像点坐标；

绘制单元，用于根据图像点坐标在目标画布上绘制对应当前图像帧的图像点；

装置还用于重复上述读取、计算、绘制的步骤直至完成所述线条的绘制；

删除单元，用于当线条绘制完毕时，删除线条对应的信息节点。

第五方面，本发明实施例还提供了一种实现线条动态效果的装置，该装置用于执行线条绘制脚本绘制线条；该装置包括：

读取单元，用于读取对应当前图像帧的图像点配置参数，图像点配置参数中的图像点位置参数在每变换一个图像帧时进行一次更新；

计算单元，用于根据图像点配置参数计算对应当前图像帧的图像点坐标；

绘制单元，用于根据图像点坐标在目标画布上绘制对应当前图像帧的图像点；

装置还用于重复上述读取、计算、绘制的步骤直至完成线条的绘制。

第六方面，本发明实施例还提供了一种实现线条动态效果的装置，该装置用于通过执行线条绘制脚本绘制线条：

初始化单元，用于在浏览器页面底层初始化一张目标画布；

绘制单元，用于在目标画布上逐帧绘制各图像帧相对前一图像帧变化的图像点。

第七方面，本发明实施例还提供了一种实现线条动态效果的***，该***包括处理设备及输出设备；

处理设备包括如上述第四方面、第五方面或第六方面所述的装置，用于通过执行线条绘制脚本，在目标画布上绘制线条的动态状态；

输出设备，用于输出显示目标画布上绘制的图像内容。

本发明实施例提供的实现线条动态效果的方法、装置及***，能够在HTML页面下方建立一个目标画布，所有图像帧的内容绘制在该目标画布上，通过画布渲染将目标画布上绘制的图像内容显示在HTML页面上。由于本实施例无需在HTML页面上建立节点标签，因此不涉及HTML页面上节点的重复绘制。而在目标画布上，已经绘制的图像点可以保留在画布上，在绘制每个图像帧时，浏览器仅需要将当前图像帧相对上一图像帧发生变化的图像点绘制在画布上即可，而无需重复绘制前一图像帧中已经绘制过的、并在当前图像帧无变化的图像点。与现有技术中直接在HTML页面中绘制节点相比，本发明实施例能够大大降低对计算机的性能要求，实际测试表明，在一般的家用计算机上实施本发明实施例，能够使图像帧的整体帧率保持在45FPS以上，大大提高了线条动态效果的流畅性。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1a示出了现有技术中绘制动态线条的样式示意图；

图1b示出了现有技术中基于SVG技术绘制动态线条的原理示意图；

图2示出了本发明实施例提供的第一种实现线条动态效果的方法流程图；

图3示出了本发明实施例提供的第二种实现线条动态效果的方法流程图；

图4示出了本发明实施例提供一种的线条延伸进度的示意图；

图5示出了本发明实施例提供的第三种实现线条动态效果的方法流程图；

图6示出了本发明实施例提供一种基于双画布缓存机制绘制图像点的示意图；

图7a示出了本发明实施例提供一种线条透明度渐变的效果示意图；

图7b示出了本发明实施例提供一种通过设置画布画笔透明度系数改变图像点透明度的示意图；

图8示出了本发明实施例提供的第四种实现线条动态效果的方法流程图；

图9示出了本发明实施例提供的一种存储队列的示意图；

图10示出了本发明实施例提供的一种烟花射线逐帧消失的效果示意图；

图11a示出了本发明实施例提供的一种烟花线条长度差异过大的示意图；

图11b示出了本发明实施例提供的一种规整烟花线条长度的示意图；

图11c示出了本发明实施例提供的一种烟花线条过于集中于烟花中心的示意图；

图11d示出了本发明实施例提供的另一种规整烟花线条长度的示意图；

图11e示出了本发明实施例提供的一种为线条终点坐标设定坐标范围的示意图；

图12a示出了本发明实施例提供的一种烟花形态不均匀的示意图；

图12b示出了本发明实施例提供的一种划分多个坐标范围烟花示意图；

图13示出了本发明实施例提供的第一种实现线条动态效果的装置的组成框图；

图14示出了本发明实施例提供的第二种实现线条动态效果的装置的组成框图；

图15示出了本发明实施例提供的第三种实现线条动态效果的装置的组成框图；

图16示出了本发明实施例提供的第四种实现线条动态效果的装置的组成框图；

图17示出了本发明实施例提供的第五种实现线条动态效果的装置的组成框图；

图18示出了本发明实施例提供的第六种实现线条动态效果的装置的组成框图；

图19示出了本发明实施例提供的第一种实现线条动态效果的***示意图；

图20示出了本发明实施例提供的第二种实现线条动态效果的***示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

线条的延伸是一个动态变化的过程，通过多个图像帧的连续播放展现出来，每个图像帧用于在画布上绘制一个图像点，所述图像点为线条的基本组成单位，不同图像帧对应的图像点坐标会不断变化，随着各个图像帧的绘制和播放，画布上就会呈现出因不断增加图像点而产生的线条延伸的效果。

通常，线条中图像点的疏密程度由图像帧的帧率大小决定，当帧率较大时(例如65FPS)，图像点排列更加紧密，视觉效果上线条相对平滑连续；当帧率较小时(例如14FPS)，图像点排列更加疏松，视觉效果上线条相对离散。本发明不对实际应用中使用的帧率大小进行限制。

下面，结合图2对本发明实施例提供的实现线条动态效果的方法进行说明，该方法包括：

201、在浏览器页面底层初始化一张目标画布。

本发明实施例中，显示线条的所有参数及逻辑全部写入到线条绘制脚本中，浏览器执行脚本中的程序代码，实现图2所示流程。在本步骤中，浏览器首先在HTML页面下方初始建立一个与HTML页面显示界面等高等宽的目标画布，然后执行后续流程，在该目标画布上进行个图像帧的绘制。通过画布渲染即可将目标画布中绘制的图像内容合成到HTML页面中。

本实施例中所谓的画布，是独立于HTML页面并位于HTML页面下方的一个绘图图层。以常用的canvas画布为例：canvas画布是HTML语言中提供的一种绘图标签，浏览器通过建立该绘图标签初始化canvas画布。根据脚本文件中预设的信息可以在canvas画布的范围内，对每一个图像点的位置、大小、颜色、透明度等属性进行设置，从而实现图像点的绘制，而多个图像点的组成则可以形成一个图像图案。与SVG技术相比，canvas画布的优势在于：第一，浏览器仅需要建立一个画布标签即可在canvas画布上对任意图像点进行绘制，无需在HTML页面上建立大量的节点标签，从而在动态效果展示过程中也就不涉及HTML页面上对大量节点的重复性绘制；第二，canvas画布可以保留在前图像帧绘制过的图像点，因此在绘制下一图像帧时，仅需要对变化的图像点进行绘制即可，无需将之前绘制过但未发生变化的图像点进行重复绘制，也就是说，canvas画布上可以对图像点进行累计绘制。

202、在所述目标画布上逐帧绘制各图像帧相对前一图像帧变化的图像点。

浏览器在目标画布上逐帧进行图像点的绘制，在绘制每个图像帧时，由于之前图像帧的图像点已经保留在目标画布上，因此浏览器只需要绘制当前图像帧相对上一图像帧发生变化的图像点即可，从而达到图像点累计绘制的目的，进而实现出线条动态延伸的效果。当然，实际应用中，也可以设定目标画布不保留在前图像帧绘制的图像点，此种情况下当需要保留在前绘制的图像点时，应当通过其他手段予以保留。

本发明实施例中所述的相对前一图像帧变化的图像点是指：

相对前一图像帧增加、减少的图像点；和/或，

相对前一图像帧而言，下述图像点配置参数发生变化的图像点：

位置、颜色、大小、透明度。

实际应用中，所有对图像点属性进行设定从而改变其视觉效果的配置参数的变化，均会使图像点相对前一图像帧发生变化。

进一步的，作为对图2所示方法的补充或独立实施的方案，本发明实施例还提供了一种实现线条动态效果的方法。如图3所示，该方法包括：

301、读取对应当前图像帧的图像点配置参数，图像点配置参数中的图像点位置参数在每变换一个图像帧时进行一次更新。

本发明实施例中，显示线条的所有参数及逻辑全部写入到线条绘制脚本中，浏览器执行脚本中的程序代码，实现图3所示流程。在本步骤中，浏览器从脚本中读取图像点配置参数，该配置参数可以人工设置在脚本中，也可以在脚本执行的过程中进行修改，或者还可以由脚本根据预设的算法计算得到。对于线条而言，其由多个图像帧展示的图像点组合而成的，因此图像点配置参数本质上就是线条的配置参数。本实施例之所以倾向将其称之为图像点配置参数是因为：某些配置参数是适用于所有图像点的，例如线条起点坐标、线条终点坐标等，这部分参数不会因为图像点的变化而改变，习惯上称之为静态参数；而某些配置参数则对应不同图像点会有不同的赋值，例如图像点位置参数，如果每个图像帧的图像点位置都是相同的，那么多帧图像播放下来的视觉效果就是画布上只有一个不动的圆点，无法描绘出线条，对于这一类参数，习惯上称之为动态参数。由于配置参数中存在部分对应图像点的动态参数，因此本发明实施例认为称作图像点配置参数更加准确。

对于动态参数，脚本可以根据预设的算法计算每一个图像点的具体数值，例如对于图像点位置参数，可以设定从线条起点坐标开始，每往后一个图像帧，其图像点的坐标朝预定方向移动一个预设步进值的距离；或者，也可人工在脚本中设置好对应不同图像点的具体坐标，在执行脚本时，浏览器从脚本中查找对应特定图像点的坐标参数即可。不论采用自动或人工哪种设定方式，在每变换一个图像帧时，获得对应该图像点的动态参数的过程，本实施例将其称之为参数更新过程，例如在本实施例中，至少需要在每变换一个图像帧时，对图像点位置参数进行一次更新。

实际应用中，可写入脚本中并允许修改的图像点配置参数包括但不限于：

线条起点坐标、线条终点坐标、图像点大小(决定线条粗细)、图像点形状(决定线条的视觉形态)、图像点颜色、图像点透明度、线条样式(直线或者曲线)、线条延伸速度、线条延伸的距离步进值。此外，脚本中还可以设置或修改线条数量，本实施例对此不作具体限制。

在绘制当前图像帧时，浏览器从脚本中读取一次图像点配置参数，其中包含线条起点坐标、线条终点坐标、图像点大小等静态参数，也包括有图像点位置等对应当前图像点的动态参数。

在本实施例的一种实现方式中，可以利用脚本文件动态配置参数的特性，在不中断线条动态展示效果的情况下，对图像点配置参数进行动态设置。例如当绿色线条不断延伸时，如果将脚本中的线条颜色修改为红色，则从完成修改时刻对应的图像帧起，该线条后半部分将变为红色。

302、根据图像点配置参数计算对应当前图像帧的图像点坐标。

在本实施例的一种实现方式中，图像点位置参数为线条延伸进度信息，在获得线条起点坐标、线条终点坐标以及线条延伸进度信息三种参数信息后，就可以确定当前图像帧对应的图像点的坐标。

所谓线条延伸进度信息是指：以线条整体长度为基数、在当前图像帧对应的时刻值上，从线条起点坐标起按照预定速度向线条终点坐标延伸的长度比例。示例性的，图4中的虚线代表需要绘制的线条的整体长度，两个端点M和N分别代表线条起点坐标和线条终点坐标。假设线条从第一个图像帧开始，按照预设的线条延伸速度由M点向N点延伸，那么在当前图像帧所在的时刻值上，线条从M点延伸到了P点，线段MP占线段MN的比值，即为上述线条延伸进度信息。而该P点位置即为当前图像帧对应的图像点的坐标。

本实施例中可以对线条延伸进度进行设定(本质上相当于设置线条延伸速度)，例如设定线条按照每帧1％的步进值进行延伸，那么对应各个图像帧的线条延伸进度信息依次为1％、2％、3％......100％。浏览器在获得线条起点坐标及线条终点坐标后，根据两点坐标计算出线条长度，读取脚本更新后的、对应当期图像帧的线条延伸进度信息，基于线条长度将线条延伸进度换算为当前线条长度，在已知线条起点坐标及当前线条长度的情况下，通过线性差值算法可以计算得到当前图像点的坐标(即图4中P点坐标)。

实际应用中，上述计算过程可以通过调用浏览器已有的接口实现，本实施例对此不作具体介绍。

303、根据图像点坐标在目标画布上绘制对应当前图像帧的图像点。

在绘制完当前帧图像点后，脚本更新线条延伸进度信息，浏览器重复图3的步骤301至步骤303，进行下一图像帧的图像点绘制，并在绘制完成后进行渲染显示，如此重复直至完成线条的绘制(即线条延伸进度到达100％)。由此，展现出线条从起点位置不断向终点位置延伸最终到达终点位置的动态效果。

实际应用中，如果设定目标画布不保留已绘制的图像点，那么任意一帧显示的目标画布中均只有一个图像点存在，视觉效果上用户只能看到一个点由起点位置移动到终点位置，显然，这种效果是不能被接受的。因此，本步骤在绘制当前帧的图像点时，还需要通过其他手段将当前图像帧之前各帧的图像点绘制到目标画布中，然后通过对目标画布的渲染即可在显示界面中展示出截止到当前图像帧的所有图像点。

在本发明实施例的一种实现方式中，该手段可以为双画布缓存机制。在该实现方式中，浏览器可以将已经绘制的图像点存储在一个虚拟画布上，在将当前帧图像点绘制到目标画布上之后，直接将虚拟画布上的图像点复制到目标画布中即可。具体的：

在目标画布进行一次渲染显示后，浏览器将目标画布上的图像内容覆盖到虚拟画布中，该虚拟画布用于记录目标画布在当前图像帧之前绘制的所有图像点。在进行下一帧图像点绘制时，浏览器首先清空目标画布，清空后目标画布上没有任何图像点。然后将当前帧图像点绘制在目标画布上，并将虚拟画布中记录的、当前图像帧之前目标画布上累计绘制的所有图像点复制到目标画布上，此时，目标画布上就绘制有从第一帧到当前帧的所有图像点。

如图5所示，该实现方式流程如下：

501、将目标画布上累计绘制的图像点覆盖到虚拟画布上进行保存。

在绘制第一帧的图像点前，目标画布上还未绘制有任何图像点，浏览器可以取消步骤501的执行，或者执行步骤501将目标画布上的空白内容绘制到虚拟画布上。而在绘制第二帧、第三帧等后续图像帧的图像点时，浏览器需要将绘制前目标画布上已经累计绘制的图像点覆盖到虚拟画布上进行保存。

本方案中所述的累计图像点是指在绘制当前帧图像点之前，已经在目标画布上绘制过的所有图像点，或者说目标画布前一次渲染展示的内容。由于本方案会通过后续步骤505将虚拟画布上的图像内容重新合成到目标画布上，所以，在绘制当前帧之前，目标画布上绘制并显示的是所有在前图像帧的图像点，而非仅绘制有前一帧的图像点。

502、清空目标画布。

清空后目标画布上没有任何图像点存在。

503、将当前图像帧的图像点绘制到目标画布上。

执行完本步骤后，目标画布上仅绘制有当前帧对应的图像点，显然，仅仅显示该图像点还无法形成线条，需要将之前各帧的图像点添加进来。

504、读取虚拟画布的图像点累计绘制状态。

505、将虚拟画布中累计绘制的图像点复制到目标画布上。

通过上述步骤501的执行，浏览器将绘制当前帧图像点之前所绘制的各帧图像点保存在虚拟画布上。通过步骤504、步骤505的实现，将该虚拟画布中的内容进行读取，并复制到目标画布上，至此，目标画布上就绘制有从第一帧到当前帧的所有图像点。

在绘制下一帧图像点时，浏览器重复上述图5流程，将包含当前帧图像点在内的所有已绘制图像点覆盖到虚拟画布中，并在目标画布上绘制下一帧图像点，最后将虚拟画布中的图像点复制到目标画布上。

如图6所示，浏览器首先计算第一帧的图像点1的坐标，然后将图像点1绘制到目标画布上进行渲染展示；然后，浏览器将目标画布中的图像内容(图像点1)覆盖到虚拟画布中保存，并在清空的目标画布上绘制第二帧的图像点2；接着，将虚拟画布中存储的图像点1复制到目标画布中，此时目标画布渲染展示出来的图像点就包括了图像点1和图像点2。

进一步，当绘制第三帧的图像点3时，浏览器将目标画布中的图像内容(图像点1及图像点2)覆盖保存到虚拟画布中，并在清空的目标画布上绘制图像点3；接着将虚拟画布中存储的图像点1和图像点2复制到目标画布中，此时目标画布渲染展示出来的图像点就包括图像点1、图像点2和图像点3。

需要说明的是，本实施例中所述的虚拟画布，其性质不同于目标画布。目标画布为传统意义上浏览器线程文件中的画布，浏览器线程能够通过渲染手段展示目标画布中的图像内容。虚拟画布之所以称为“虚拟”是因为其仅仅是脚本文件中的一种数据结构，而非浏览器线程文件中的画布；而之所以又称为“画布”是因为其用于记录目标画布中的图像内容，在作用上等同于目标画布。为便于直观理解，本实施例将这种位于脚本文件中的数据结构称之为虚拟画布，实际应用中应当将其与一般意义上的画布进行区分。

进一步的，作为与双画布缓存机制方案的结合，本实施例还可以对线条中图像点的透明度进行逐步调整，实现如图7a所示的线条由浅及深或由深及浅的动态变化效果，从而可以生动的表达线条的延伸趋势。具体的：

在图5所示方法中，可以预先设置画布画笔的透明度系数，该系数的取值范围为0到1，其中，0代表完全透明，1代表完全不透明，透明度系数的大小与线条的透明度变化速度成负相关关系。在每执行一次步骤505时，浏览器按照画布画笔的透明度系数，将虚拟画布中累计绘制的图像点绘制到目标画布中，从而使从虚拟画布中复制的图像点比直接绘制到目标画布中的图像点(当前帧的图像点)低一个透明度级别。随着历次图像点的复制，线条中图像点的透明度产生阶梯式的变化。

示例性的，假设画布画笔的透明度系数为0.9，图像点的初始透明度为1，如图7b所示：在通过画布画笔绘制第一帧的图像点1时，该图像点1绘制到目标画布中后透明度变为0.9，之后在绘制第二帧图像点2时，将透明度为0.9的图像点1保存到虚拟画布中，图像点2绘制到目标画布中的透明度变为0.9，当将图像点1从虚拟画布绘制到目标画布时，其透明度进行了一次调整，变化为0.9*0.9＝0.81，与目标画布中图像点2的透明度0.9相比下降了一个级别；之后在绘制第三帧图像点3时，将透明度为0.81的图像点1和透明度为0.9的图像点2保存到虚拟画布中，图像点3绘制到目标画布中的透明度变为0.9，当将图像点1和图像点2从虚拟画布绘制到目标画布时，对其两者的透明度进行了一次调整，分别变化为0.9*0.9*0.9＝0.729、0.9*0.9＝0.81，与透明度为0.9的图像点3相比，三者之间形成了0.729、0.81、0.9的透明度阶梯变化。

在绘制第四帧的图像点4时，与前述类似的，最终呈现在目标画布上的图像点1至图像点4的透明度依次为：0.9*0.9*0.9*0.9＝0.6561、0.9*0.9*0.9＝0.729、0.9*0.9＝0.81及0.9。随着图像点的不断绘制，最终线条呈现出透明度变化趋势。

图7b给出了透明度随线条延伸方向由浅及深变化的示例，当需要使透明度随线条延伸方向由深及浅变化时，只需要将图像点的初始透明度设置为小于1的数值，并将上述公式中的相乘关系改为相除即可，本实施例对此不再详细介绍。

需要说明的是，实际应用中，线条是由大量图像点组成的，为方便表达及理解，上述各线条延伸的示意图中，仅以有限个图像点为例进行说明，视觉上离散程度比较高，但这并代表本实施例在实际应用中实现的绘制效果。

进一步的，本发明实施例还提供了一种实现线条动态效果的方法，该方法能够在画布上实现烟花燃放的动态效果，如图8所示，该方法包括：

801、从存储队列中读取各个信息节点记录的图像点配置参数。

与前述方法类似，本实施例同样通过执行线条绘制脚本实现图8所示流程，并且可以基于脚本文件的特点动态配置各个线条的图像点配置参数。

通常烟花在燃放时会散发出多条射线，为模仿该效果，浏览器需要同时绘制多个线条。在脚本文件中使用存储队列对每个线条对应的图像点配置信息进行存储。一种存储队列的示意图如图9所示：存储队列由多个信息节点组成，每个信息节点对应存储一个线条的图像点配置参数。每个线条的图像点配置参数可以相同也可以不同，或者还可以部分相同。实际应用中，烟花燃放时所有射线均由***核心发出，因此存储队列中各个线条的线条起始坐标应当相同，该坐标可提前设置在脚本中，例如设置为显示界面的中心位置，或者随机确定得出，或者由用户选择设置。此外烟花燃放时，线条延伸的方向和长度不具有规律性，为提高烟花效果的逼真程度，本实施例中，各个线条的线条终点坐标随机生成。脚本文件通过执行预设的随机数生成程序获得与线条数量一致的多个随机坐标，作为各个线条的线条终点坐标。

上述内容是以展示一朵烟花为例说明的，实际应用中，当需要同时展示多个烟花时，可以使用多个存储队列实现。

浏览器将存储队列中所有信息节点的图像点配置参数全部进行读取并对各个线条对应当前图像帧的图像点分别进行绘制。在绘制下一帧图像点前，每个信息节点分别更新自己的图像点位置参数。

802、根据图像点配置参数计算各个线条对应当前图像帧的图像点坐标。

与前述实施例类似的，浏览器分别通过各个线条起始点坐标、线条终点坐标以及线条延伸进度信息，计算各个线条在当前图像帧中的图像点坐标，获得与线条数量一致的多个图像点坐标。

803、根据图像点坐标在目标画布上绘制对应当前图像帧的图像点。

本实施例中，采用双画布缓存机制进行图像点绘制，该实现方式与前述实现方式相同，不同之处在于，本实施例中对应一个图像帧需要绘制与线条数量相同的多个图像点。对于双画布缓存机制，这里不再赘述。

804、当线条绘制完毕时删除线条对应的信息节点。

实际应用中，烟花的某个线条发射出去之后便消失于空中，为模仿此种效果，本实施例中当某个线条绘制完毕后，将其对应的信息节点进行删除，这样下一图像帧中就不再绘制该线条对应的图像点。对于对应之前图像帧绘制的图像点，虽然会在后续图像帧中仍会复制到目标画布，但是当对画布画笔设置透明度系数时，随着复制次数的增加，这些图像点逐渐变得透明直至完全不可视，最终产生线条消失于终点的动态效果。在完美解决了线条遗留问题的同时，也更加贴近真实的烟花燃放效果。以烟花中的一个线条为例，线条逐渐消失的动态过程如图10所示。

需要说明的是，本实施例中，各个线条的线条终点坐标是随机生成的，这也就意味着各个线条的长度可能存在不同。在相同的线条延伸进度下，各个线条到达终点的时间有所不同。将线条以信息节点的形式存放在存储队列中的优势在于，浏览器可以对不同线条的信息节点进行独立管理，删除某个线条的信息节点时并不会影响其他未绘制完毕线条的继续绘制，从而实现线条有长有短、燃尽有先有后的逼真效果。

进一步的，当需要展示烟花持续燃放的动态效果时，可以按照一定的规则向存储队列中添加新的信息节点，例如在每删除一个信息节点的同时增加一个信息节点，或者按照预设的时间间隔，持续性的增加信息节点。在图9中，脚本文件中的数据生成器程序新建信息节点并添加到存储队列中。在新产生一个信息节点时，其中的某些图像点配置参数应当与已存在的信息节点保持一致，例如线条起点坐标；某些图像点配置参数则可以即时生成，例如随机生成线条终点坐标。在一种较为简单的实现方式中，可以将删除掉的信息节点的参数直接配置给新的信息节点，或者更为简单的，仅将绘制完毕的线条对应的信息节点中的线条延伸进度信息清零即可，由此该线条对应的信息节点还可保留在存储队列中使用，节省了删除、增加信息节点的操作。

如前所述，烟花线条的终点坐标是随机生成，可能产生的问题在于，在统计学的角度上各个线条的方向和长度过于分散，无法形成烟花的大体形态。例如在图11a中，线条之间的长度差异过大，与真实情况中大体成圆形或椭圆形的烟花形态不符。对于这种情况，在本实施例的一种改进方案中，可以预先为线条终点坐标设定一个坐标范围，并控制随机数发生程序仅在该范围内生成随机坐标。或者，不对随机数发生过程进行限制，而是在得到随机坐标后增加一步验证过程，将线条终点坐标位于坐标范围之外的线条终点坐标予以丢弃，剩余线条终点坐标保留。在图11b中，通过设定以线条起点坐标为圆心、半径为r的坐标范围，可以过滤掉坐标范围边界外的线条终点坐标，达到规整烟花形态的目的。此外，通过设置坐标范围的方式，还可以大体限定烟花的形态大小。

与此类似的，为防止随机产生的线条终点坐标过于集中在烟花中心周围，导致图11c所示的烟花形态无法舒展的问题，也可以设置如图11d所示的坐标范围，将落于该坐标范围内的线条终点坐标予以丢弃。如图11e所示，在本实施例的一种实现方式中，可以分别设置半径为r的第一坐标范围和半径为R的第二坐标范围，其中R大于r。浏览器仅保留使用落于图11e中两个坐标范围之间区域内的线条终点坐标。

再进一步的，除线条长度外，随机生成线条终点坐标的方式还可能导致线条的发射方向过于集中，从而产生如图12a所示的烟花形态不均匀的问题。本实施例同样可以利用坐标范围解决该问题。具体的，如图12b所示，可以根据预期的烟花形态划分两个坐标范围，对于坐标范围1，其仅保留落在坐标范围1内的线条终点坐标，对于坐标范围2，其仅保留落在坐标范围2中的线条终点坐标。两个坐标范围均仅保留自身范围内的线条终点坐标，通过这种“过滤”方式，在随机生成的坐标点足够多的情况下，两个坐标范围中“积累”下来的线条终点坐标将趋近于相同，从而使得烟花形态更加均匀。实际应用中，坐标范围的划分粒度越小、划分数量越多，烟花形态的均匀程度越高。

实际应用中，还可以通过对坐标范围边界的设定绘制出不同造型的烟花。例如通过方形坐标范围绘制方形烟花、通过椭圆形坐标范围绘制椭圆形烟花、通过三角形坐标范围绘制三角形烟花、或者通过不规则坐标范围绘制形态不规则的烟花等。

进一步的，作为对上述方法的实现，本发明实施例还提供了一种实现线条动态效果的装置，该装置用于执行线条绘制脚本绘制线条。如图13所示，该装置包括：

初始化单元131，用于在浏览器页面底层初始化一张目标画布；

绘制单元132，用于在目标画布上逐帧绘制各图像帧相对前一图像帧变化的图像点。

进一步的，相对前一图像帧变化的图像点包括：

相对前一图像帧增加、减少的图像点；和/或，

相对前一图像帧而言，下述图像点配置参数发生变化的图像点：

位置、颜色、大小、透明度。

进一步的，如图14所示，绘制单元132，包括：

读取模块1321，用于读取对应当前图像帧的图像点配置参数，图像点配置参数中的图像点位置参数在每变换一个图像帧时进行一次更新；

计算模块1322，用于根据图像点配置参数计算对应当前图像帧的图像点坐标；

绘制模块1323，用于根据图像点坐标在目标画布上绘制对应当前图像帧的图像点；

绘制单元132，用于重复上述读取、计算、绘制的步骤直至完成线条的绘制。

进一步的，图像点位置参数为线条延伸进度信息，线条延伸进度信息用于记录从线条起点坐标起按照预定速度向线条终点坐标延伸的长度比例；

计算模块1322，用于根据线条起点坐标、线条终点坐标以及线条延伸进度信息，计算对应当前图像帧的图像点坐标。

进一步的，绘制模块1323，用于：

清空目标画布；

将当前图像帧的图像点绘制到目标画布上；

读取虚拟画布的图像点累计绘制状态，虚拟画布用于记录目标画布在当前图像帧之前绘制的所有图像点；

将虚拟画布中累计绘制的图像点复制到目标画布上。

进一步的，如图14所示，绘制单元132，还包括：

保存模块1324，用于在清空目标画布前，将目标画布上累计绘制的图像点覆盖到虚拟画布上进行保存。

进一步的，如图14所示，绘制单元132，还包括：

设置模块1325，用于设置画布画笔的透明度系数；

绘制模块1323用于按照画布画笔的透明度系数，将虚拟画布中累计绘制的图像点复制到目标画布上。

进一步的，如图14所示，绘制单元132，还包括：

配置模块1326，用于动态配置线条的图像点配置参数。

进一步的，作为对上述方法的实现，本发明实施例还提供了一种实现线条动态效果的装置，该装置用于执行线条绘制脚本绘制线条。如图15所示，该装置包括：

读取单元151，用于读取对应当前图像帧的图像点配置参数，图像点配置参数中的图像点位置参数在每变换一个图像帧时进行一次更新；

计算单元152，用于根据图像点配置参数计算对应当前图像帧的图像点坐标；

绘制单元153，用于根据图像点坐标在目标画布上绘制对应当前图像帧的图像点；

该装置还用于重复上述读取、计算、绘制的步骤直至完成线条的绘制。

进一步的，读取单元151读取的图像点位置参数为线条延伸进度信息，线条延伸进度信息用于记录从线条起点坐标起按照预定速度向线条终点坐标延伸的长度比例；

计算单元152，用于根据线条起点坐标、线条终点坐标以及线条延伸进度信息，计算对应当前图像帧的图像点坐标。

进一步的，如图16所示，绘制单元153，包括：

清空模块1531，用于清空目标画布；

绘制模块1532，用于将当前图像帧的图像点绘制到目标画布上；

读取模块1533，用于读取虚拟画布的图像点累计绘制状态，虚拟画布用于记录目标画布在当前图像帧之前绘制的所有图像点；

绘制模块1532还用于将虚拟画布中累计绘制的图像点复制到目标画布上。

进一步的，绘制模块1532用于在清空目标画布前，将目标画布上累计绘制的图像点覆盖到虚拟画布上进行保存。

进一步的，如图16所示，该装置还包括：

设置单元154，用于设置画布画笔的透明度系数；

绘制模块1532，用于按照画布画笔的透明度系数，将虚拟画布中累计绘制的图像点复制到目标画布上。

进一步的，如图16所示，该装置还包括：

配置单元155，用于动态配置线条的图像点配置参数。

进一步的，作为对上述方法的实现，本发明实施例还提供了一种实现线条动态效果的装置，该装置用于通过执行线条绘制脚本实现烟花燃放的动态效果。如图17所示，该装置包括：

读取单元171，用于从存储队列中读取各个信息节点记录的图像点配置参数，一个信息节点对应一个线条的绘制，每个图像点配置参数中的线条起点坐标相同，线条终点坐标随机生成，图像点位置参数在每变换一个图像帧时进行一次更新；

计算单元172，用于根据图像点配置参数计算各个线条对应当前图像帧的图像点坐标；

绘制单元173，用于根据图像点坐标在目标画布上绘制对应当前图像帧的图像点；

该装置还用于重复上述读取、计算、绘制的步骤直至完成线条的绘制；

删除单元174，用于当线条绘制完毕时，删除线条对应的信息节点。

进一步的，如图18所示，该装置还包括：

添加单元175，用于向存储队列中添加新的信息节点。

进一步的，如图18所示，该装置还包括：

设定单元176，用于设定线条终点坐标的坐标范围；

生成单元177，用于在坐标范围内随机生成线条终点坐标；

生成单元177还用于随机生成线条终点坐标，若线条终点坐标位于坐标范围之外，则丢弃线条终点坐标。

进一步的，读取单元171读取的图像点位置参数为线条延伸进度信息，线条延伸进度信息用于记录从线条起点坐标起按照预定速度向线条终点坐标延伸的长度比例；

计算单元172，用于根据线条起点坐标、线条终点坐标以及线条延伸进度信息，分别计算每个线条对应当前图像帧的图像点坐标。

进一步的，如图18所示，绘制单元173，包括：

清空模块1731，用于清空目标画布；

绘制模块1732，用于将当前图像帧的图像点绘制到目标画布上；

读取模块1733，用于读取虚拟画布的图像点累计绘制状态，虚拟画布用于记录目标画布在当前图像帧之前绘制的所有图像点；

绘制模块1732还用于将虚拟画布中累计绘制的图像点复制到目标画布上。

进一步的，绘制模块1732用于在清空目标画布前，将目标画布上累计绘制的图像点覆盖到虚拟画布上进行保存。

进一步的，如图18所示，该装置还包括：

设置单元178，用于设置画布画笔的透明度系数；

绘制模块1732，用于按照画布画笔的透明度系数，将虚拟画布中累计绘制的图像点复制到目标画布上。

进一步的，如图18所示，该装置还包括：

配置单元179，用于动态配置线条的图像点配置参数。

进一步的，作为对上述方法的实现，本发明实施例还提供了一种实现线条动态效果的***，如图19所示，该***包括处理设备191及输出设备192；

处理设备191包括如上述图13至图18中任一幅所示的装置，用于通过执行线条绘制脚本，在目标画布上绘制线条的动态状态；

输出设备192，用于输出显示目标画布上绘制的图像内容。实际应用中，该输出设备192可以是终端设备上的屏幕，或者独立设置的屏幕，或者为投影仪，也可以是电视。

进一步的，如图20所示，该***还包括：

控制台193，用于动态配置线条的图像点配置参数。

本发明实施例提供的实现线条动态效果的装置及***，能够在HTML页面下方建立一个目标画布，所有图像帧的内容绘制在该目标画布上，通过画布渲染将目标画布上绘制的图像内容显示在HTML页面上。由于本实施例无需在HTML页面上建立节点标签，因此不涉及HTML页面上节点的重复绘制。而在目标画布上，已经绘制的图像点可以保留在画布上，在绘制每个图像帧时，浏览器仅需要将当前图像帧相对上一图像帧发生变化的图像点绘制在画布上即可，而无需重复绘制前一图像帧中已经绘制过的、并在当前图像帧无变化的图像点。与现有技术中直接在HTML页面中绘制节点相比，本发明实施例能够大大降低对计算机的性能要求，实际测试表明，在一般的家用计算机上实施本发明实施例，能够使图像帧的整体帧率保持在45FPS以上，大大提高了线条动态效果的流畅性。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

可以理解的是，上述方法及装置中的相关特征可以相互参考。另外，上述实施例中的“第一”、“第二”等是用于区分各实施例，而并不代表各实施例的优劣。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在此提供的算法和显示不与任何特定计算机、虚拟***或者其它设备固有相关。各种通用***也可以与基于在此的示教一起使用。根据上面的描述，构造这类***所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的发明名称(如确定网站内链接等级的装置)中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (27)

1.一种实现线条动态效果的方法，其特征在于，所述方法用于实现烟花燃放的动态效果，所述方法包括：

通过执行线条绘制脚本进行下述操作：

从存储队列中读取各个信息节点记录的图像点配置参数，一个信息节点对应一个线条的绘制，每个图像点配置参数中的线条起点坐标相同，线条终点坐标随机生成，图像点位置参数在每变换一个图像帧时进行一次更新；

根据所述图像点配置参数计算各个线条对应当前图像帧的图像点坐标；

根据所述图像点坐标在目标画布上绘制对应当前图像帧的图像点；

重复上述读取、计算、绘制的步骤，并当所述线条绘制完毕时删除所述线条对应的信息节点。

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

向所述存储队列中添加新的信息节点。

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

设定所述线条终点坐标的坐标范围；

在所述坐标范围内随机生成所述线条终点坐标；或者，

随机生成所述线条终点坐标，若所述线条终点坐标位于所述坐标范围之外，则丢弃所述线条终点坐标。

4.根据权利要求1所述的方法，其特征在于，所述图像点位置参数为线条延伸进度信息，所述线条延伸进度信息用于记录从所述线条起点坐标起按照预定速度向所述线条终点坐标延伸的长度比例；

所述根据所述图像点配置参数计算各个线条对应当前图像帧的图像点坐标，包括：

根据线条起点坐标、线条终点坐标以及所述线条延伸进度信息，分别计算每个线条对应当前图像帧的图像点坐标。

5.根据权利要求1所述的方法，其特征在于，所述根据所述图像点坐标在目标画布上绘制对应当前图像帧的图像点，包括：

清空所述目标画布；

将所述当前图像帧的图像点绘制到所述目标画布上；

读取虚拟画布的图像点累计绘制状态，所述虚拟画布用于记录目标画布在当前图像帧之前绘制的所有图像点；

将所述虚拟画布中累计绘制的图像点复制到所述目标画布上。

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

在清空所述目标画布前，将所述目标画布上累计绘制的图像点覆盖到所述虚拟画布上进行保存。

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

设置画布画笔的透明度系数；

所述将所述虚拟画布中累计绘制的图像点复制到所述目标画布上，包括：

按照所述画布画笔的透明度系数，将所述虚拟画布中累计绘制的图像点复制到所述目标画布上。

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

动态配置所述线条的图像点配置参数。

9.一种实现线条动态效果的方法，其特征在于，所述方法包括：

通过执行线条绘制脚本进行下述操作：

读取对应当前图像帧的图像点配置参数，所述图像点配置参数中的图像点位置参数在每变换一个图像帧时进行一次更新；

根据所述图像点配置参数计算对应当前图像帧的图像点坐标；

根据所述图像点坐标在目标画布上绘制对应当前图像帧的图像点；

重复上述读取、计算、绘制的步骤直至完成所述线条的绘制。

10.根据权利要求9所述的方法，其特征在于，所述图像点位置参数为线条延伸进度信息，所述线条延伸进度信息用于记录从所述线条起点坐标起按照预定速度向所述线条终点坐标延伸的长度比例；

所述根据所述图像点配置参数计算对应当前图像帧的图像点坐标，包括：

根据线条起点坐标、线条终点坐标以及所述线条延伸进度信息，计算对应当前图像帧的图像点坐标。

11.根据权利要求9所述的方法，其特征在于，所述根据所述图像点坐标在目标画布上绘制对应当前图像帧的图像点，包括：

清空所述目标画布；

将所述当前图像帧的图像点绘制到所述目标画布上；

读取虚拟画布的图像点累计绘制状态，所述虚拟画布用于记录目标画布在当前图像帧之前绘制的所有图像点；

将所述虚拟画布中累计绘制的图像点复制到所述目标画布上。

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

在清空所述目标画布前，将所述目标画布上累计绘制的图像点覆盖到所述虚拟画布上进行保存。

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

设置画布画笔的透明度系数；

所述将所述虚拟画布中累计绘制的图像点复制到所述目标画布上，包括：

按照所述画布画笔的透明度系数，将所述虚拟画布中累计绘制的图像点复制到所述目标画布上。

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

动态配置所述线条的图像点配置参数。

15.一种实现线条动态效果的方法，其特征在于，所述方法包括：

通过执行线条绘制脚本进行下述操作：

在浏览器页面底层初始化一张目标画布；

在所述目标画布上逐帧绘制各图像帧相对前一图像帧变化的图像点。

16.根据权利要求15所述的方法，其特征在于，所述相对前一图像帧变化的图像点包括：

相对前一图像帧增加、减少的图像点；和/或，

相对前一图像帧而言，下述图像点配置参数发生变化的图像点：

位置、颜色、大小、透明度。

17.根据权利要求15所述的方法，其特征在于，所述在所述目标画布上逐帧绘制各图像帧相对前一图像帧变化的图像点，包括：

读取对应当前图像帧的图像点配置参数，所述图像点配置参数中的图像点位置参数在每变换一个图像帧时进行一次更新；

根据所述图像点配置参数计算对应当前图像帧的图像点坐标；

根据所述图像点坐标在目标画布上绘制对应当前图像帧的图像点；

重复上述读取、计算、绘制的步骤直至完成所述线条的绘制。

18.根据权利要求17所述的方法，其特征在于，所述图像点位置参数为线条延伸进度信息，所述线条延伸进度信息用于记录从所述线条起点坐标起按照预定速度向所述线条终点坐标延伸的长度比例；

所述根据所述图像点配置参数计算对应当前图像帧的图像点坐标，包括：

根据线条起点坐标、线条终点坐标以及所述线条延伸进度信息，计算对应当前图像帧的图像点坐标。

19.根据权利要求17所述的方法，其特征在于，所述根据所述图像点坐标在目标画布上绘制对应当前图像帧的图像点，包括：

清空所述目标画布；

将所述当前图像帧的图像点绘制到所述目标画布上；

读取虚拟画布的图像点累计绘制状态，所述虚拟画布用于记录目标画布在当前图像帧之前绘制的所有图像点；

将所述虚拟画布中累计绘制的图像点复制到所述目标画布上。

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

在清空所述目标画布前，将所述目标画布上累计绘制的图像点覆盖到所述虚拟画布上进行保存。

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

设置画布画笔的透明度系数；

所述将所述虚拟画布中累计绘制的图像点复制到所述目标画布上，包括：

按照所述画布画笔的透明度系数，将所述虚拟画布中累计绘制的图像点复制到所述目标画布上。

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

动态配置所述线条的图像点配置参数。

23.一种实现线条动态效果的装置，其特征在于，所述装置用于通过执行线条绘制脚本实现烟花燃放的动态效果，所述装置包括：

读取单元，用于从存储队列中读取各个信息节点记录的图像点配置参数，一个信息节点对应一个线条的绘制，每个图像点配置参数中的线条起点坐标相同，线条终点坐标随机生成，图像点位置参数在每变换一个图像帧时进行一次更新；

计算单元，用于根据所述图像点配置参数计算各个线条对应当前图像帧的图像点坐标；

绘制单元，用于根据所述图像点坐标在目标画布上绘制对应当前图像帧的图像点；

所述装置还用于重复上述读取、计算、绘制的步骤直至完成所述线条的绘制；

删除单元，用于当所述线条绘制完毕时，删除所述线条对应的信息节点。

24.一种实现线条动态效果的装置，其特征在于，所述装置用于通过执行线条绘制脚本绘制线条；所述装置包括：

读取单元，用于读取对应当前图像帧的图像点配置参数，所述图像点配置参数中的图像点位置参数在每变换一个图像帧时进行一次更新；

计算单元，用于根据所述图像点配置参数计算对应当前图像帧的图像点坐标；

绘制单元，用于根据所述图像点坐标在目标画布上绘制对应当前图像帧的图像点；

所述装置还用于重复上述读取、计算、绘制的步骤直至完成所述线条的绘制。

25.一种实现线条动态效果的装置，其特征在于，所述装置用于通过执行线条绘制脚本绘制线条：

初始化单元，用于在浏览器页面底层初始化一张目标画布；

绘制单元，用于在所述目标画布上逐帧绘制各图像帧相对前一图像帧变化的图像点。

26.一种实现线条动态效果的***，其特征在于，所述***包括处理设备及输出设备；

所述处理设备包括如上述权利要求24至权利要求26中任一项所述的装置，用于通过执行线条绘制脚本，在目标画布上绘制线条的动态状态；

所述输出设备，用于输出显示所述目标画布上绘制的图像内容。

27.根据权利要求26所述的***，其特征在于，所述***还包括：

控制台，用于动态配置所述线条的图像点配置参数。