CN111666007A - 鼠标跟随特效的实现方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本发明公开了一种鼠标跟随特效的实现方法、装置、计算机设备及存储介质，应用于计算机技术领域，用于在web网页端实现鼠标的线性特效。本发明提供的方法包括：监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中；实时获取鼠标在该浏览器页面经过的坐标点，将该坐标点更新存储在数组中；将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示；在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。

Description

鼠标跟随特效的实现方法、装置、计算机设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及鼠标跟随特效的实现方法、装置、计算机设备及存储介质。

背景技术

鼠标或手指的跟随特效是现在H5游戏中比较重要的游戏反馈，鼠标跟随特效的意思是当鼠标或手指在页面中滑过时，会产生一道跟随鼠标滑动痕迹的跟随轨迹。我们以往能看到这种跟随效果只能在某些游戏APP上，基于Web端与终端的程序开发环境不同，现今世面上在Web端要实现鼠标跟随的游戏特效，特效的示例还十分有限。

由于无法直接将某些游戏APP上的鼠标跟随特效直接应用在Web端，因此需要对网页端实现鼠标跟随特效重新进行开发，以实现网页端对鼠标跟随特效的需求。

现有的在Web端实现鼠标跟随特效的实现方法中，可以通过获取鼠标的运动坐标，将运动坐标中相邻的点连起来构成鼠标的运动轨迹，在该鼠标的运动轨迹上实现跟随特效，但是还需要实现擦除两个点之间线段的方法，使得显示出的鼠标的运动轨迹不会像“贪吃蛇”一样越来越长，由于canvas没有提供擦除两个点之间线段的方法，提供的是清除整个画布中的某个位置的矩形内的所有内容，例如方法canvas.clearRect(x,y,w,h)，只能实现清除从点(x,y)开始，宽为w，高为h的矩形内的内容，达不到擦除线段的效果，因此现有的在Web端实现的鼠标跟随的特效只限于沿着鼠标的运动轨迹上块状(包括圆形、矩形、正方形等)特效的发散、消失等特效，无法实现在鼠标运动轨迹的线性特效。

发明内容

本发明实施例提供一种鼠标跟随特效的实现方法、装置、计算机设备及存储介质，以解决现有技术无法在web网页端实现鼠标的线性特效的技术问题。

一种鼠标跟随特效的实现方法，该方法包括：

监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；

将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中；

实时获取该鼠标在该浏览器页面经过的坐标点，将实时获取的该坐标点更新存储在该数组中；

将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示；

在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。

一种鼠标跟随特效的实现装置，该装置包括：

鼠标监听模块，用于监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；

坐标存储模块，用于将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中；

更新模块，用于实时获取该鼠标在该浏览器页面经过的坐标点，将实时获取的该坐标点更新存储在该数组中；

显示模块，用于将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示；

循环模块，用于在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤。

一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述鼠标跟随特效的实现方法的步骤。

一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述鼠标跟随特效的实现方法的步骤。

本申请提出的鼠标跟随特效的实现方法、装置、计算机设备及存储介质，通过实时获取鼠标在浏览器页面中操作的坐标点，并将该鼠标的坐标点存储在数组中并实时更新鼠标的坐标点，然后将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示，在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环上述步骤即可以得到鼠标被实时操作的线性运动轨迹，本申请提出的鼠标跟随特效的实现方法、装置、计算机设备及存储介质可适用在web网页端，能够在网页端实现鼠标跟随的线性特效。

附图说明

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

图1是本发明一实施例中鼠标跟随特效的实现方法的一应用环境示意图；

图2是本发明一实施例中鼠标跟随特效的实现方法的一流程图；

图3是本发明另一实施例中鼠标跟随特效的实现方法的一流程图；

图4是本发明又一实施例中鼠标跟随特效的实现方法的一流程图；

图5是本发明一实施例中鼠标跟随特效的实现装置的结构示意图；

图6是本发明一实施例中计算机设备的一示意图。

具体实施方式

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

本申请提供的鼠标跟随特效的实现方法，可应用在如图1的应用环境中，其中，该计算机设备包括但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。

图2是本发明一实施例中鼠标跟随特效的实现方法的一流程图，在一实施例中，提供一种鼠标跟随特效的实现方法，以该方法应用在图1中的服务器为例进行说明，如图2所示，该鼠标跟随特效的实现方法包括如下步骤S101至S105：

S101、监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点。

在该实施例中，可以通过浏览器打印获取鼠标在浏览器页面中操作的坐标点。

作为可选地，该步骤S101进一步包括：

检测到鼠标单击事件被触发时，判断监听到鼠标操作事件。

在该实施例中，所述检测到鼠标单击事件被触发时可以是鼠标单击但不进行拖动，此时获取到的是若干个重叠的坐标点，也可以是鼠标单击且进行拖动，此时获取到的是若干个连续且不同的坐标点。

S102、将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中。

在其中一个实施例中，该鼠标跟随特效的实现方法还包括：

根据接收的指令创建包括有预设个存储位的该数组。

其中，所述指令的作用在于在数据库中创建数组，该数据的存储位的个数固定为预设个，例如，可以通过接收的指令创建包括有50个存储位的数组，该指令可以通过读取程序员输入的编程代码得到。

在其中一个实施例中，该数组的存储位的位数为最多能够存储的坐标点的个数。

作为可选地，可以创建包括有50个存储位的数组，表示该数组最多能够存储50个坐标点。

S103、实时获取该鼠标在该浏览器页面经过的坐标点，将实时获取的该坐标点更新存储在该数组中。

在该实施例中，更新所述数组的方式例如当所述数组的存储位未存满时，增加最新获取的所述鼠标的坐标点，当所述数组的存储位存储满时，删除在所述数组的头部存储的最早时刻获取的坐标点，并在所述数组的尾部增加最新的坐标点，使得所述数组的每个存储位均存储有所有坐标点。

S104、将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示。

在其中一个实施例中，该鼠标跟随特效的实现方法还包括：

在浏览器页面中创建用于显示该运动轨迹的画布，将该运动轨迹在该画布中显示。

在其中一个实施例中，可以在所述浏览器页面中创建canvas画布，用于显示鼠标的运动轨迹。

其中，本步骤可以理解为根据数组中存储的鼠标的坐标点预先创建的用于显示鼠标运动轨迹的画布。

S105、在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。

根据本实施例的一个使用场景例如：为模拟浏览器渲染页面帧，如今的浏览器渲染帧数大都保持在60帧，即每秒渲染60个画面帧，这样用户看到的动画都是流畅的，不会出现卡顿。1秒60帧，我们可以通过浏览器setInterval(function(),16)方法来实现，这个方法的第一个参数为将要执行的方法，第二个参数为每16毫秒执行一次，且这个定时方法循环执行以获取鼠标最新的运动轨迹。

因为1秒等于1000毫秒，1000毫秒渲染60帧，所以两个页面帧之间的间隔时间为1000/60＝16(毫秒)。

可以理解的，在浏览器渲染每一帧时，先清除整个canvas画布，将所有内容抹去，得到一个空白的画布，再将数组中存储的坐标点(可能为50个，也可能小于50个)从第一个点开始，每两个点利用canvas进行线段相连，得到一个大致的由若干个坐标点连接起来的线段。

本申请提出的鼠标跟随特效的实现方法通过实时获取鼠标在浏览器页面中操作的坐标点，并将该鼠标的坐标点存储在数组中并实时更新鼠标的坐标点，然后将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示，在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环上述步骤即可以得到鼠标被实时操作的线性运动轨迹，本申请提出的鼠标跟随特效的实现方法、装置、计算机设备及存储介质可适用在web网页端，能够在网页端实现鼠标跟随的线性特效。

图3是本发明另一实施例中鼠标跟随特效的实现方法的一流程图，如图3所示，该鼠标跟随特效的实现方法在包括上述步骤S101、S104及S105的基础上，上述步骤S102进一步包括：

首次获取该鼠标在该浏览器页面中操作的坐标点时，将最先获取的该鼠标的坐标点存储在该数组的最前存储位；

按照获取该坐标点的时间先后顺序在该存储位中依次往后存储该坐标点。

根据本实施例的一个使用场景例如将最先获取的坐标点存储在该数组的最前存储位，将后获取的坐标点存储在与该最前存储位相邻的后存储位，使得该数组的存储位依次存储的坐标点即鼠标的运动轨迹经过的坐标点。

上述步骤S103进一步包括：

判断该数组的存储位是否存储满，若否，则将实时获取的该坐标点依次存储在该数组的尾部，若是，则删除存储在该数组最前存储位的坐标点且在该数组的尾部压入新的坐标点。

根据本实施例的一个使用场景例如：在浏览器开始打印鼠标经过点时，将一个个点的数据压入数组，从1到50，刚开始就可能存在当前数组中坐标点的个数为10，但是每一帧都在渲染，这一帧我们将这10个点连接起来，在下一帧里可能就变成了20个点的相连，在若干帧后，数组中达到50个点，就保持这个点数，所以50这个设定只是影响鼠标轨迹的最大长度，我们可以根据喜好或需求来人为设定。

本实施例通过鼠标在拖动过程中不断获取鼠标的坐标点信息，并将该坐标点存入一个数组中保存，如果数组中的点的个数已经达到了该数组的存储位存储的最大值，最新获取的坐标点在压入数组之前，将数组中第一个压入的点给剔除，再将新的点压入数组中，这样就可以保持这个数组中保存的坐标点的个数永远是鼠标经过最新的若干个位置点。

本实施例通过在得到鼠标最新的运动轨迹时，在浏览器页面中创建用于显示鼠标运动轨迹的画布，将所述数组中存储的两相邻坐标点依次连接成线段，以形成的鼠标的运动轨迹，并将所述运动轨迹在所述画布中显示，并在浏览器每渲染一次页面帧时，擦除所述画布中显示的所述鼠标的运动轨迹，获取所述数组中最近一次更新的鼠标的坐标点，并循环执行使得画布中显示鼠标最新的线段型的运动轨迹，通过对该运动轨迹本身添加特效以实现网页端在鼠标自身的运动轨迹上实现跟随特效的需求。

图4是本发明又一实施例中鼠标跟随特效的实现方法的一流程图，如图4所示，该鼠标跟随特效的实现方法在包括上述步骤S101至S105的基础上，该鼠标跟随特效的实现方法进一步包括：

对该鼠标的运动轨迹添加预设的特效，并在该画布中显示该特效。

在其中一个实施例中，该对该鼠标的运动轨迹添加预设的特效的步骤包括：

将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹时，依次加粗连接形成的各个该线段。

本实施例通过将每两个点之间的连线不断的增加线段的粗度，便可以得到类似的尾端细、跟随端粗的鼠标跟随效果。

本实施例提出的鼠标跟随特效的实现方法，通过实时获取鼠标在浏览器页面中操作的坐标点，并将该鼠标的坐标点存储在数组中并实时更新鼠标的坐标点，然后将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示，在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环上述步骤即可以得到鼠标被实时操作的线性运动轨迹，本申请提出的鼠标跟随特效的实现方法、装置、计算机设备及存储介质可适用在web网页端，能够在网页端实现鼠标跟随的线性特效。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

在一实施例中，提供一种鼠标跟随特效的实现装置，该鼠标跟随特效的实现装置与上述实施例中鼠标跟随特效的实现方法一一对应。如图5所示，该鼠标跟随特效的实现装置100包括鼠标监听模块11、坐标存储模块12、更新模块13、显示模块14和循环模块15。各功能模块详细说明如下：

鼠标监听模块11，用于监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点。

在该实施例中，该鼠标监听模块11可以通过浏览器打印获取鼠标在浏览器页面中操作的坐标点。

作为可选地，该鼠标监听模块11进一步包括：

触发检测单元，用于检测到鼠标单击事件被触发时，判断监听到鼠标操作事件。

在该实施例中，所述检测到鼠标单击事件被触发时可以是鼠标单击但不进行拖动，此时获取到的是若干个重叠的坐标点，也可以是鼠标单击且进行拖动，此时获取到的是若干个连续且不同的坐标点。

坐标存储模块12，用于将获取的该坐标点按照事件发生的时间先后顺序依次存储在数组中。

更新模块13，用于实时获取该鼠标在该浏览器页面经过的坐标点，将实时获取的该坐标点更新存储在该数组中。

在该实施例中，该更新模块13更新所述数组的方式例如当所述数组的存储位未存满时，增加最新获取的所述鼠标的坐标点，当所述数组的存储位存储满时，删除在所述数组的头部存储的最早时刻获取的坐标点，并在所述数组的尾部增加最新的坐标点，使得所述数组的每个存储位均存储有所有坐标点。

显示模块14，用于将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹，并将该运动轨迹在预先创建的画布中显示。

循环模块15，用于在该浏览器每渲染一次页面帧时，擦除该画布中显示的该运动轨迹，获取该数组中最近一次更新的该鼠标的坐标点，循环形成该鼠标的运动轨迹至本步骤。

根据本实施例的一个使用场景例如：为模拟浏览器渲染页面帧，如今的浏览器渲染帧数大都保持在60帧，即每秒渲染60个画面帧，这样用户看到的动画都是流畅的，不会出现卡顿。1秒60帧，我们可以通过浏览器setInterval(function(),16)方法来实现，这个方法的第一个参数为将要执行的方法，第二个参数为每16毫秒执行一次，且这个定时方法循环执行以获取鼠标最新的运动轨迹。

因为1秒等于1000毫秒，1000毫秒渲染60帧，所以两个页面帧之间的间隔时间为1000/60＝16(毫秒)。

可以理解的，在浏览器渲染每一帧时，先清除整个canvas画布，将所有内容抹去，得到一个空白的画布，再将数组中存储的坐标点(可能为50个，也可能小于50个)从第一个点开始，每两个点利用canvas进行线段相连，得到一个大致的由若干个坐标点连接起来的线段。

在其中一个实施例中，该鼠标跟随特效的实现装置100还包括：

数组创建模块，用于根据接收的指令创建包括有预设个存储位的该数组。

其中，所述指令的作用在于在数据库中创建数组，该数据的存储位的个数固定为预设个，例如，可以通过接收的指令创建包括有50个存储位的数组，该指令可以通过读取程序员输入的编程代码得到。

在其中一个实施例中，该数组的存储位的位数为最多能够存储的坐标点的个数。

作为可选地，可以创建包括有50个存储位的数组，表示该数组最多能够存储50个坐标点。

画布创建模块，用于在浏览器页面中创建用于显示该运动轨迹的画布，将该运动轨迹在该画布中显示。

在其中一个实施例中，通过该画布创建模块可以在所述浏览器页面中创建canvas画布，用于显示鼠标的运动轨迹。

在其中一个实施例中，该坐标存储模块12进一步包括：

第一存储单元，用于首次获取该鼠标在该浏览器页面中操作的坐标点时，将最先获取的该鼠标的坐标点存储在该数组的最前存储位；

第二存储单元，用于按照获取该坐标点的时间先后顺序在该存储位中依次往后存储该坐标点。

在其中一个实施例中，该更新模块13进一步包括：

判断单元，用于判断该数组的存储位是否存储满，若否，则将实时获取的该坐标点依次存储在该数组的尾部，若是，则删除存储在该数组最前存储位的坐标点且在该数组的尾部压入新的坐标点。

根据本实施例的一个使用场景例如：在浏览器开始打印鼠标经过点时，将一个个点的数据压入数组，从1到50，刚开始就可能存在当前数组中坐标点的个数为10，但是每一帧都在渲染，这一帧我们将这10个点连接起来，在下一帧里可能就变成了20个点的相连，在若干帧后，数组中达到50个点，就保持这个点数，所以50这个设定只是影响鼠标轨迹的最大长度，我们可以根据喜好或需求来人为设定。

本实施例通过鼠标在拖动过程中不断获取鼠标的坐标点信息，并将该坐标点存入一个数组中保存，如果数组中的点的个数已经达到了该数组的存储位存储的最大值，最新获取的坐标点在压入数组之前，将数组中第一个压入的点给剔除，再将新的点压入数组中，这样就可以保持这个数组中保存的坐标点的个数永远是鼠标经过最新的若干个位置点。

在其中一个实施例中，该鼠标跟随特效的实现装置100还包括：

特效添加模块，用于对该鼠标的运动轨迹添加预设的特效，并在该画布中显示该特效。

作为可选地，该特效添加模块具体用于将该数组中存储的两相邻坐标点依次连接成线段，以形成该鼠标的运动轨迹时，依次加粗连接形成的各个该线段。

本实施例通过将每两个点之间的连线不断的增加线段的粗度，便可以得到类似的尾端细、跟随端粗的鼠标跟随效果。

本实施例通过在得到鼠标最新的运动轨迹时，在浏览器页面中创建用于显示鼠标运动轨迹的画布，将所述数组中存储的两相邻坐标点依次连接成线段，以形成的鼠标的运动轨迹，并将所述运动轨迹在所述画布中显示，并在浏览器每渲染一次页面帧时，擦除所述画布中显示的所述鼠标的运动轨迹，获取所述数组中最近一次更新的鼠标的坐标点，并循环执行使得画布中显示鼠标最新的线段型的运动轨迹，通过对该运动轨迹本身添加特效以实现网页端在鼠标自身的运动轨迹上实现跟随特效的需求。

其中上述模块/单元中的“第一”和“第二”的意义仅在于将不同的模块/单元加以区分，并不用于限定哪个模块/单元的优先级更高或者其它的限定意义。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或模块的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或模块，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或模块，本申请中所出现的模块的划分，仅仅是一种逻辑上的划分，实际应用中实现时可以有另外的划分方式。

关于鼠标跟随特效的实现装置的具体限定可以参见上文中对于鼠标跟随特效的实现方法的限定，在此不再赘述。上述鼠标跟随特效的实现装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端计算机设备，其内部结构图可以如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部服务器通过网络连接通信。该计算机程序被处理器执行时以实现一种鼠标跟随特效的实现方法。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例中鼠标跟随特效的实现方法的步骤，例如图2所示的步骤101至步骤105及该方法的其它扩展和相关步骤的延伸。或者，处理器执行计算机程序时实现上述实施例中鼠标跟随特效的实现装置的各模块/单元的功能，例如图5所示模块11至模块15的功能。为避免重复，这里不再赘述。

所述处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述计算机装置的控制中心，利用各种接口和线路连接整个计算机装置的各个部分。

所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述计算机装置的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、视频数据等)等。

所述存储器可以集成在所述处理器中，也可以与所述处理器分开设置。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述实施例中鼠标跟随特效的实现方法的步骤，例如图2所示的步骤101至步骤105及该方法的其它扩展和相关步骤的延伸。或者，计算机程序被处理器执行时实现上述实施例中鼠标跟随特效的实现装置的各模块/单元的功能，例如图5所示模块11至模块15的功能。为避免重复，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (10)

1.一种鼠标跟随特效的实现方法，其特征在于，所述方法包括：

监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；

将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中；

实时获取所述鼠标在所述浏览器页面经过的坐标点，将实时获取的所述坐标点更新存储在所述数组中；

将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹，并将所述运动轨迹在预先创建的画布中显示；

在所述浏览器每渲染一次页面帧时，擦除所述画布中显示的所述运动轨迹，获取所述数组中最近一次更新的所述鼠标的坐标点，循环形成所述鼠标的运动轨迹至本步骤直至所述鼠标操作事件停止。

2.根据权利要求1所述的鼠标跟随特效的实现方法，其特征在于，所述方法还包括：

根据接收的指令创建包括有预设个存储位的所述数组；

在浏览器页面中创建用于显示所述运动轨迹的画布，将所述运动轨迹在所述画布中显示。

3.根据权利要求1所述的鼠标跟随特效的实现方法，其特征在于，所述将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中的步骤包括：

首次获取所述鼠标在所述浏览器页面中操作的坐标点时，将最先获取的所述鼠标的坐标点存储在所述数组的最前存储位；

按照获取所述坐标点的时间先后顺序在所述存储位中依次往后存储所述坐标点。

4.根据权利要求1所述的鼠标跟随特效的实现方法，其特征在于，所述将实时获取的所述坐标点更新存储在所述数组中的步骤进一步包括：

判断所述数组的存储位是否存储满，若否，则将实时获取的所述坐标点依次存储在所述数组的尾部，若是，则删除存储在所述数组最前存储位的坐标点且在所述数组的尾部压入新的坐标点。

5.根据权利要求1至4任一项所述的鼠标跟随特效的实现方法，其特征在于，所述方法还包括：

对所述鼠标的运动轨迹添加预设的特效，并在所述画布中显示所述特效。

6.根据权利要求5所述的鼠标跟随特效的实现方法，其特征在于，所述对所述鼠标的运动轨迹添加预设的特效的步骤包括：

将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹时，依次加粗连接形成的各个所述线段。

7.一种鼠标跟随特效的实现装置，其特征在于，所述装置包括：

鼠标监听模块，用于监听到鼠标操作事件时，获取鼠标在浏览器页面中操作的坐标点；

坐标存储模块，用于将获取的所述坐标点按照事件发生的时间先后顺序依次存储在数组中；

更新模块，用于实时获取所述鼠标在所述浏览器页面经过的坐标点，将实时获取的所述坐标点更新存储在所述数组中；

显示模块，用于将所述数组中存储的两相邻坐标点依次连接成线段，以形成所述鼠标的运动轨迹，并将所述运动轨迹在预先创建的画布中显示；

循环模块，用于在所述浏览器每渲染一次页面帧时，擦除所述画布中显示的所述运动轨迹，获取所述数组中最近一次更新的所述鼠标的坐标点，循环形成所述鼠标的运动轨迹至本步骤。

8.根据权利要求7所述的鼠标跟随特效的实现装置，其特征在于，所述更新模块包括：

判断单元，用于判断所述数组的存储位是否存储满，若否，则将实时获取的所述坐标点依次存储在所述数组的尾部，若是，则删除存储在所述数组最前存储位的坐标点且在所述数组的尾部压入新的坐标点。

9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至6中任一项所述鼠标跟随特效的实现方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6中任一项所述鼠标跟随特效的实现方法的步骤。

Images