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

说明书

本发明公开一种基于编程语言提升网页画布性能的方法以及电子设备，其中，方法包括：将一更新和绘制动画函数添加至网页浏览器中，以及设置更新和绘制动画函数的兼容信息；调用画布维持函数，以维持屏幕画布的状态，以及调用路径函数创建目标路径，并将所述目标路径设置为目标剪辑区域；将一背景图像绘制至所述目标剪辑区域中，并恢复屏幕画布的状态参数，以重置所述目标剪辑区域；创建离屏画布，并通过一缓存区缓存所述离屏画布，并判断所述离屏画布判断是否重复绘制，若是，则直接调用缓存区的绘制结果，若否，则接收绘制操作，并对绘制结果进行保存。通过本发明提供的方法，用户可以通过画布进行多次图像的绘制，均不会降低画布的性能。

技术领域

本发明涉及网页领域，尤其涉及一种基于编程语言提升网页画布性能的方法以及电子设备。

背景技术

网页画布(画布)是指用于绘制图像的网页标签。具体的说，画布是指前端编程语言(如HTML5)中的“容器”，用户可通过脚本语言(如JavaScript)完成图像的绘制。更具体的说，用户可在画布中绘制文本(即文字信息)、线条(如直线、曲线或者弧线等等)、矩形、圆形等等。

然而，现有的网页浏览器中的网页画布在经过多次绘制操作后，容易出现卡顿的问题，即网页画布的性能随着绘制次数的增加而逐渐下降，并且，现有的网页浏览器并没有标准或者较为完善的方法用于提升网页画布的性能。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种基于编程语言提升网页画布性能的方法以及电子设备，旨在解决现有网页画布在经过多次绘制后性能较低的问题。

本发明的技术方案如下：

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

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

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

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

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

所述的基于编程语言提升网页画布性能的方法，所述步骤A之前包括步骤：

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

所述的基于编程语言提升网页画布性能的方法，所述更新和绘制动画函数具体为：requestNextAnimationFrame。

所述的基于编程语言提升网页画布性能的方法，所述步骤B具体包括：

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

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

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

所述的基于编程语言提升网页画布性能的方法，所述步骤C具体包括：

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

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

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