[发明专利]基于canvas元素的路径虚化方法及装置

说明书

本公开涉及基于canvas元素的路径虚化方法及装置。该方法包括：获取canvas元素的画布中待处理路径的宽度；根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度；确定所述待处理路径对应的虚化路径中子路径的总层数；根据所述虚化宽度和所述总层数，确定所述虚化路径中各层子路径的宽度；根据所述总层数，确定所述各层子路径的透明度；叠加所述各层子路径，得到所述虚化路径。本公开通过不同宽度且不同透明度的多层子路径叠加得到虚化路径，从而能够实现在canvas元素的画布中对路径进行虚化。

技术领域

本公开涉及信息技术领域，尤其涉及一种基于canvas元素的路径虚化方法及装置。

背景技术

Canvas元素是HTML5(HyperText Markup Language 5，超文本标记语言第5版本)中的元素。使用canvas元素，可以在网页上绘制图像。在canvas元素中，所有的图形都是以路径为基础的。Canvas元素中的路径是由canvas画布中的多个点依次相连而成的曲线。为了使canvas画布中路径与背景之间的过渡更加柔和，本公开的发明人提出了一种基于canvas元素的路径虚化方法及装置。

发明内容

有鉴于此，本公开提出了一种基于canvas元素的路径虚化方法及装置。

根据本公开的一方面，提供了一种基于canvas元素的路径虚化方法，包括：

获取canvas元素的画布中待处理路径的宽度；

根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度；

确定所述待处理路径对应的虚化路径中子路径的总层数；

根据所述虚化宽度和所述总层数，确定所述虚化路径中各层子路径的宽度；

根据所述总层数，确定所述各层子路径的透明度；

叠加所述各层子路径，得到所述虚化路径。

在一种可能的实现方式中，根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度，包括：

根据所述待处理路径对应的画笔硬度，确定所述虚化路径中的第一层子路径的宽度；

根据所述待处理路径的宽度，以及所述第一层子路径的宽度，确定所述待处理路径对应的虚化宽度。

在一种可能的实现方式中，根据所述待处理路径的宽度，以及所述第一层子路径的宽度，确定所述待处理路径对应的虚化宽度，包括：

计算所述待处理路径的宽度与所述第一层子路径的宽度的第一差值；

将所述第一差值与第一系数的乘积确定为所述待处理路径对应的虚化宽度。

在一种可能的实现方式中，确定所述待处理路径对应的虚化路径中子路径的总层数，包括：

根据所述待处理路径对应的虚化宽度，以及所述虚化路径中相邻两层子路径的宽度差，确定所述待处理路径对应的总层数。

在一种可能的实现方式中，根据所述总层数，确定所述各层子路径的透明度，包括：

根据第一层子路径的透明度以及所述总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，其中，i为正整数；

根据所述第i层子路径与所述第i+1层子路径叠加后的透明度，以及所述第i层子路径的透明度，确定所述第i+1层子路径的透明度。

在一种可能的实现方式中，根据所述第一层子路径的透明度以及所述总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，包括：

采用式1确定所述第i层子路径与所述第i+1层子路径叠加后的透明度C_i(i+1)，