[发明专利]一种基于编程语言提升网页画布性能的方法以及电子设备

权利要求书

1.一种基于编程语言提升网页画布性能的方法，其特征在于，包括步骤：

A、将一更新和绘制动画函数添加至网页浏览器中，以及设置更新和绘制动画函数的兼容信息；

B、调用画布维持函数，以维持屏幕画布的状态，以及调用路径函数创建目标路径，并将所述目标路径设置为目标剪辑区域；

C、将一背景图像绘制至所述目标剪辑区域中，并恢复屏幕画布的状态参数，以重置所述目标剪辑区域；

D、创建离屏画布，并通过一缓存区缓存所述离屏画布，并判断所述离屏画布判断是否重复绘制，若是，则直接调用缓存区的绘制结果，若否，则接收绘制操作，并对绘制结果进行保存。

2.根据权利要求1所述基于编程语言提升网页画布性能的方法，其特征在于，所述步骤A之前包括步骤：

A0、移除所述屏幕画布中的计时函数，其中，所述计时函数用于定义屏幕画布的重复动作。

3.根据权利要求1所述基于编程语言提升网页画布性能的方法，其特征在于，所述更新和绘制动画函数具体为：requestNextAnimationFrame。

4.根据权利要求1所述基于编程语言提升网页画布性能的方法，其特征在于，所述步骤B具体包括：

B1、通过画布维持函数context.save维持屏幕画布的状态；

B2、调用路径函数beginPath创建目标路径；

B3、调用剪切函数context clip将所述目标路径设置为所述目标剪辑区域。

5.根据权利要求1所述基于编程语言提升网页画布性能的方法，其特征在于，所述步骤C具体包括：

C1、清除所述目标剪辑区域中的所有元素；

C2、将所述背景图像绘制至所述目标剪辑区域中，以填充所述目标剪辑区域；

C3、在背景图像填充目标剪辑区域后，通过重置屏幕画布的状态参数，以重置所述目标剪辑区域。

6.根据权利要求1所述基于编程语言提升网页画布性能的方法，其特征在于，所述步骤D之后包括：

E、将css的transform函数替换原屏幕画布的转换函数。

7.根据权利要求6所述基于编程语言提升网页画布性能的方法，其特征在于，所述步骤E之后包括：

F1、收集屏幕画布的计算操作；

F2、对计算操作进行分解，得到多个子计算操作；

F3、根据子计算操作的数量创建多个webworker；

F4、将子计算操作推入所述webworker，通过webworker对子计算操作进行计算，收集计算结果，并关闭所有webworker。

8.一种电子设备，其特征在于，包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

将一更新和绘制动画函数添加至网页浏览器中，以及设置更新和绘制动画函数的兼容信息；

调用画布维持函数，以维持屏幕画布的状态，以及调用路径函数创建目标路径，并将所述目标路径设置为目标剪辑区域；

将一背景图像绘制至所述目标剪辑区域中，并恢复屏幕画布的状态参数，以重置所述目标剪辑区域；

创建离屏画布，并通过一缓存区缓存所述离屏画布，并判断所述离屏画布判断是否重复绘制，若是，则直接调用缓存区的绘制结果，若否，则接收绘制操作，并对绘制结果进行保存。

9.一种计算机程序产品，其特征在于，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行权利要求1-7任一项所述的基于编程语言提升网页画布性能的方法。

10.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-7任一项所述的基于编程语言提升网页画布性能的方法。