CN109783102B - 一种小程序中Canvas画布生成的方法、装置、设备和存储介质 - Google Patents

Abstract

本发明公开了一种小程序中Canvas画布生成的方法、装置、设备和存储介质。该方法包括：检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；根据待生成Canvas画布属性调用预先配置的集成模块；通过调用的集成模块加载绘制参数至预定义的Canvas画布，生成对应的Canvas画布。本发明实施例可通过待生成Canvas画布属性直接调用预先配置的集成模块，以将对应的绘制参数加载至预定义的Canvas画布中，无需对根据待生成Canvas画布属性对绘制参数进行单独配置，降低了代码冗余度，提升了Canvas画布的加载速度，从而提升了用户的使用体验。

Description

一种小程序中Canvas画布生成的方法、装置、设备和存储介质

技术领域

本发明实施例涉及网络技术，尤其涉及一种小程序中Canvas画布生成的方法、装置、设备和存储介质。

背景技术

随着互联网技术和微信小程序的不断发展，为了提升用户使用体验以及积极引导用户，可将关键信息(比如，小程序二维码)以图片形式保存到本地。绘图是每个移动设备必备的技术，为了帮助开发人员简单高效地开发和调试微信小程序，微信小程序提供了Canvas组件及其相关原生的用于绘图的API函数，从而使开发者更为快速便捷的完成相关功能开发。

在现有技术中，微信小程序为开发人员提供的用于绘图的API函数多达几十种，每个API函数有独立的参数说明和回调返回。在实际开发过程中，由于设计需求各有不同，开发人员需要根据设计需求在诸多API函数中寻找对应的API函数使用，并对每个API函数配置对应的绘制参数和回调函数。比如，在Canvas画布中绘制一条文本，开发人员需要使用设置文本、字体大小、颜色、对齐方式、坐标位置等多个API函数，并对该多个API函数分别定义相关的绘制参数，从而造成开发人员的工作量大且时间成本较高。

发明内容

有鉴于此，本发明提供一种小程序中Canvas画布生成的方法、装置、设备和存储介质，减少了开发时间成本，提高了整体的开发效率。

第一方面，本发明实施例提供了一种小程序中Canvas画布生成的方法，包括：

检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；

根据所述待生成Canvas画布属性调用预先配置的集成模块；

通过调用的集成模块加载绘制参数至所述预定义的Canvas画布，生成对应的Canvas画布。

进一步的，在检测到小程序中的Canvas画布生成触发操作之前，还包括：

获取Canvas画布的基础元素，所述基础元素至少包括文本、图片和图形之一；

集成所述基础元素后封装，得到集成模块；

根据所述小程序中用于绘制的API函数配置集成模块的初始化默认值；

将配置后的集成模块置于Promise实例的已决处理函数中。

进一步的，在获取Canvas画布的基础元素之前，还包括：

通过Promise构造函数创建Promise实例；所述Promise实例包括已决处理函数和未决处理函数，所述已决处理函数用于表示Promise实例的异步操作已成功结束的函数，未决处理函数用于表示Promise实例的异步操作未成功结束的函数。

进一步的，在获取待生成Canvas画布属性和预定义的Canvas画布之前，还包括：

获取显示屏幕尺寸；

根据所述显示屏幕尺寸创建预定义的Canvas画布。

进一步的，根据所述显示屏幕尺寸创建预定义的Canvas画布，包括：

创建Canvas标签；

根据所述显示屏幕尺寸设置画布高度、画布宽度和画布标识符，生成与所述Canvas标签对应的预定义的Canvas画布。

进一步的，在检测到小程序中的Canvas画布生成触发操作之后，还包括：

将预先配置的集成模块加载到预设开发环境中。

第二方面，本发明实施例还提供了一种小程序中Canvas画布生成的装置，包括：

第一获取模块，用于检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；

调用模块，用于根据所述待生成Canvas画布属性调用预先配置的集成模块；

第一生成模块，用于通过调用的集成模块加载绘制参数至所述预定义的Canvas画布，生成对应的Canvas画布。

进一步的，所述装置，还包括：

第二获取模块，用于在检测到小程序中的Canvas画布生成触发操作之前，获取Canvas画布的基础元素，所述基础元素至少包括文本、图片和图形之一；

集成封装模块，用于集成所述基础元素后封装，得到集成模块；

配置模块，用于根据所述小程序中用于绘制的API函数配置集成模块的初始化默认值；

放置模块，用于将配置后的集成模块置于Promise实例的已决处理函数中。

进一步的，所述装置，还包括：

第二生成模块，用于在获取Canvas画布的基础元素之前，通过Promise构造函数创建Promise实例；所述Promise实例包括已决处理函数和未决处理函数，所述已决处理函数用于表示Promise实例的异步操作已成功结束的函数，未决处理函数用于表示Promise实例的异步操作未成功结束的函数。

进一步的，所述装置，还包括：

第三获取模块，用于在获取待生成Canvas画布属性和预先创建的预定义的Canvas画布之前，获取显示屏幕尺寸；

创建模块，用于根据所述显示屏幕尺寸创建预定义的Canvas画布。

进一步的，所述创建模块，包括：

创建单元，用于创建Canvas标签；

生成单元，用于根据所述显示屏幕尺寸设置画布高度、画布宽度和画布标识符，生成与所述Canvas标签对应的预定义的Canvas画布。

进一步的，所述装置，还包括：

加载模块，用于在检测到小程序中的Canvas画布生成触发操作之后，将预先配置的集成模块加载到预设开发环境中。

第三方面，本发明实施例还提供了一种设备，包括：存储器以及一个或多个处理器；

所述存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如第一方面所述的小程序中Canvas画布生成的方法。

第四方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如第一方面所述的小程序中Canvas画布生成的方法。

本发明通过检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；根据待生成Canvas画布属性调用预先配置的集成模块；通过调用的集成模块加载绘制参数至预定义的Canvas画布，生成对应的Canvas画布。本发明实施例可通过待生成Canvas画布属性直接调用预先配置的集成模块，以将对应的绘制参数加载至预定义的Canvas画布中，即可生成对应的Canvas画布，无需对根据待生成Canvas画布属性多次对绘制参数进行单独配置，即也无需多次对绘制参数对应的程序代码进行调整，降低了代码冗余度，提升了Canvas画布的加载速度，从而提升了用户的使用体验。

附图说明

图1是本发明实施例一提供的一种小程序中Canvas画布生成的方法的流程图；

图2是本发明实施例一提供的一种Canvas画布的显示示意图；

图3是本发明实施例一提供的另一种Canvas画布的显示示意图；

图4是本发明实施例二提供的一种小程序中Canvas画布生成的方法的流程图；

图5是本发明实施例三提供的一种小程序中Canvas画布生成的方法的流程图；

图6是本发明实施例三提供的一种集成模块配置方法的流程图；

图7是本发明实施例四提供的一种小程序中Canvas画布生成的装置的结构框图；

图8是本发明实施例五提供的一种设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1是本发明实施例一提供的一种小程序中Canvas画布生成的方法的流程图，本实施例中提供的小程序中Canvas画布生成的方法可以由终端设备执行，该终端设备可以通过软件和/或硬件的方式实现，该终端设备可以是两个或多个物理实体构成，也可以是一个物理实体构成。本实施例中终端设备为服务器。

参考图1，该小程序中Canvas画布生成的方法具体包括如下步骤：

S110、检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布。

在实施例中，Canvas画布生成触发操作，可以理解为在预先创建的预定义的Canvas画布上开始绘制的触发指令。该操作可以为打开Canvas画布的绘制开发环境的启动操作，也可将创建Canvas标签的操作作为Canvas画布生成触发操作。当然，对此并不进行限定。其中，创建Canvas标签的过程就是预定义的Canvas画布的预先创建并生成的过程。

在此需要说明的是，待生成Canvas画布属性可以理解为根据不同产品的场景需求，而自定义的Canvas画布的配置参数。其中，待生成Canvas画布属性可以为任意类型的配置参数信息，对其具体类型不作限定。在实施例中，Canvas画布的基础元素包括：文本、图片和图形。可以理解为，待生成Canvas画布属性可以为文本、图片或图形等，并且，在Canvas画布属性为不同类型时，其对应的API函数也是不同的，以及不同的API函数，所对应的绘制参数也是不同的。其中，基础元素可以理解为根据设计需求而需要绘制的文本、图形、图片等元素；API函数可以理解为一个服务中心，调用这个服务中心的各种服务(其中，每一种服务是一个函数)，可达到描绘图形的目的，并且，这些函数服务的对象是应用程序，在实施例中，API函数可以理解为第三方小程序提供的支持绘制Canvas画布的函数方法；绘制参数可以理解为绘制基础元素时所需要的自定义的参数，比如，色值、字体大小、元素位置等。比如，第三方小程序可为微信小程序。当基础元素为文本时，API函数可包括：颜色、字体、对齐方式等；当基础元素为图片时，API函数可包括：坐标位置、对齐方式、图片格式、图片尺寸等；当基础元素为图形时，API函数可包括：线条粗细、线条类型、图形形状等。同时，颜色所对应的绘制参数为色值；字体所对应的绘制参数为字体大小，依次类推，在此不对API函数进行一一赘述。

在此需要说明的是，预先定义的Canvas画布可以理解为一个空白的画布。在实施例中，该预先定义的Canvas画布是预先创建并生成的，在该预先定义的Canvas画布设置有画布高度和画布宽度，以及Canvas画布的唯一标识符。可以理解为，在预定义的Canvas画布上通过程序代码进行画笔控制，从而可以在预定义的Canvas画布上绘制出不同的效果。当然，在预定义的Canvas画布上既可生成静态图片，也可生成动态图片，其中，动态图片可以理解为一个动画效果。在本方案中，只是对在预定义的Canvas画布绘制出静态图片进行说明。

S120、根据待生成Canvas画布属性调用预先配置的集成模块。

其中，集成模块可以理解为集成有不同功能的模块。在实际操作过程中，由于不同的设计需求，待生成Canvas画布属性也是不同的。为了将待生成Canvas画布属性对应的绘制参数直接加载到预定义的Canvas画布中，在预设开发环境中，存储有预先配置的集成模块。其中，在预先配置的集成模块中包含Canvas画布的不同基础元素，并且，每个基础元素配置有对应的API函数和绘制参数。

在实施例中，当获取到待生成Canvas画布属性时，根据不同的待生成Canvas画布属性从预先配置的集成模块中查找到对应的配置参数信息，以将该配置参数信息绘制到预先定义的Canvas画布中。

S130、通过调用的集成模块加载绘制参数至预定义的Canvas画布，生成对应的Canvas画布。

在此需要说明的是，绘制参数可以理解为不同API函数对应的参数信息。在此需要说明的是，每个API函数可对应多个绘制参数。比如，一个API函数对应的是颜色，但颜色可以包括多种不同的颜色，则在绘制不同颜色时，该API函数对应的绘制参数也是不同的。

在实施例中，在从预先配置的集成模块中得到待生成Canvas画布属性对应的绘制参数时，将该绘制参数直接加载到预先定义的Canvas画布上，即可得到对应的Canvas画布。示例性地，以在预定义的Canvas画布上绘制一个笑脸表情为例，对小程序中Canvas画布生成的方法进行说明。图2是本发明实施例一提供的一种Canvas画布的显示示意图。如图2所示，假设预定义的Canvas画布的高度为60px，宽度为50px，并且，预定义的Canvas画布的唯一标识符为123，则预定义的Canvas画布为图2中左图所示的显示画面；并且，获取到的待生成Canvas画布属性为基础元素为圆形和线条，线条颜色为黑色，线条类型为实线。可以理解为待生成Canvas画布的基础元素为图形，并且该图形为圆形；对应的API函数为线条颜色和线条类型，以及线条颜色对应的绘制参数为黑色，线条类型对应的绘制参数为实线。在获取到待生成Canvas画布属性之后，从预先配置有不同绘制参数和API函数的集成模块中选取对应的配置参数信息，即可得到线条颜色为黑色对应的绘制参数，以及线条类型为实线对应的绘制参数；然后将黑色对应的绘制参数以及实线对应的绘制参数加载至预定义的Canvas画布中，生成如图2中右图所示的Canvas画布。

图3是本发明实施例一提供的另一种Canvas画布的显示示意图。如图3所示，预定义的Canvas画布的高度为60px，宽度为50px，并且，预定义的Canvas画布的唯一标识符为124，则预定义的Canvas画布为图3中左图所示的显示画面。在此可以理解为，不同的预定义的Canvas画布所对应的唯一标识符也是不同的。同时，获取到的待生成Canvas画布属性为，基础元素为小丑图片和文本，以及文本对应的字体颜色为黑色，小丑图片的对齐方式为居中，则从集成模块中调用字体颜色所对应的API函数，以及对齐方式所对应的API函数，然后将黑色对应的绘制参数，以及居中对应的绘制参数加载到Canvas画布唯一标识符我124的预定义的Canvas画布中，以得到如图3的右图所示的Canvas画布。

本实施例的技术方案，通过检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；根据所述待生成Canvas画布属性调用预先配置的集成模块；通过调用的集成模块加载绘制参数至所述预定义的Canvas画布，生成对应的Canvas画布。本发明实施例可通过待生成Canvas画布属性直接调用预先配置的集成模块，以将对应的绘制参数加载至预定义的Canvas画布中，即可生成对应的Canvas画布，无需对根据待生成Canvas画布属性对绘制参数进行单独配置，即也无需多次对绘制参数对应的程序代码进行调整，降低了代码冗余度，提升了Canvas画布的加载速度，从而提升了用户的使用体验。

实施例二

图4是本发明实施例二提供的一种小程序中Canvas画布生成的方法的流程图，本实施例是在上述实施例的基础上，为了能够调用预先配置的集成模块，对生成集成模块的过程进行说明。参考图4，该小程序中Canvas画布生成的方法包括如下步骤：

S210、通过Promise构造函数创建Promise实例。

其中，Promise实例包括已决处理函数和未决处理函数，已决处理函数用于表示Promise实例的异步操作已成功结束的函数，未决处理函数用于表示Promise实例的异步操作未成功结束的函数。

在此需要说明的是，Promise构造函数用来生成Promise实例。在实施例中，可以使用ES6(ECMAScript 6)中的Promise构造函数创建Promise实例，以使得Promise实例利用自身具备的异步执行特性，为后续调用集成模块并返回对应的返回值做铺垫。在Promise实例包含状态发生改变时所采用的回调函数，即Promise实例包括已决处理函数和未决处理函数，在将已决处理函数作为返回结果时，表明Promise实例中的异步操作成功结束；在将未决处理函数作为返回结果时，表明Promise实例中的异步操作未成功结束。

S220、获取Canvas画布的基础元素。

其中，基础元素至少包括文本、图片和图形之一。一般来说，在Canvas画布中可进行绘制任何线、图形、填充等一系列的操作。在实施例中，为了使预先配置的集成模块中能够包含尽可能多的绘制参数和API函数。在获取Canvas画布的基础元素时，尽量获取Canvas画布能够支持的所有基础元素，比如，基础元素可包括文本、图片、图形。其中，文本的内容可为任意字符类型的内容，比如，汉字、字母、数字、各种符号等；图片可为本地图片，也可为网络图片，相应的，本地图片对应的是本地的处理路径，网络图片对应的是图片所对应IP地址；图形可以为不同形状的，比如，矩形、圆形、椭圆形、五角形等。

S230、集成基础元素后封装，得到集成模块。

在实施例中，在获取到Canvas画布能够支持的所有基础元素之后，将该所有基础元素集成在一个集合中，并通过程序代码将所有基础元素封装在一个组件或功能模块中，以得到对应的集成模块。

S240、根据小程序中用于绘制的API函数配置集成模块的初始化默认值。

在实施例中，每个基础模块都对应多个API函数，并且，每个API函数都对应多个绘制参数。在对基础模块进行集成封装时，也包含多个API函数的参数配置。在调用待生成Canvas画布属性对应的绘制参数时，为了更快速地获取到绘制参数，需对集成模块中的所有基础元素对应的API函数所对应的绘制参数进行默认值的配置，以实现动态配置API函数的目的。当然，为了确保集成模块的稳健性和复用性，在生成Canvas画布的实际操作过程中，若集成模块中未包含待生成Canvas画布属性所对应的绘制参数，可自动将该待生成Canvas画布属性所对应的基础元素、API函数或绘制参数配置到集成模块中，保证了后续可快速调用集成模块中的绘制参数。

S250、将配置后的集成模块置于Promise实例的已决处理函数中。

在此需要说明的是，为了可动态配置回调函数，在完成集成模块的配置之后，直接将配置后的集成模块置于Promise实例的已决处理函数，然后返回该异步执行函数，以实现异步操作已成功结束。从而不需对每个API函数均设置一个回调函数，降低了代码冗余度。

S260、检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布。

S270、根据待生成Canvas画布属性调用预先配置的集成模块。

S280、通过调用的集成模块加载绘制参数至预定义的Canvas画布，生成对应的Canvas画布。

在上述实施例的基础上，为了能够获取预先创建的预定义的Canvas画布。因此，在获取待生成Canvas画布属性和预先创建的预定义的Canvas画布之前，还包括步骤S290-S2110：

S290、获取显示屏幕尺寸。

其中，显示屏幕尺寸可以理解为Canvas画布所要嵌入的移动终端的显示屏幕的尺寸大小。在实施例中，为了保证Canvas画布能够适应不同的移动终端的显示屏幕尺寸，可自定义一个函数，以根据显示屏幕尺寸自动调节Canvas画布在显示界面所展示的尺寸大小。其中，移动终端与服务器之间的连接可通过无线通信连接，也可以通过有线连接。其中，无线通信连接可包括：Wi-Fi、蓝牙等连接方式；有线连接可包括：通用串行总线(UniversalSerial Bus，USB)连接方式。

S2100、创建Canvas标签。

在此需要说明的是，要使用Canvas画布绘制图形必须在页面中添加Canvas标签，其中，Canvas标签即画布标签。比如，代码语句为：<canvas class＝‘myCanvas’…>，则canvas即为画布标签。

S2110、根据所述显示屏幕尺寸设置画布高度、画布宽度和画布标识符，生成与Canvas标签对应的预定义的Canvas画布。

在实施例中，在确定显示屏幕尺寸之后，可直接根据显示屏幕尺寸设置画布高度、画布宽度。当然，显示屏幕尺寸可与画布高度、画布宽度成一定的比例，从而根据显示屏幕尺寸自动调节Canvas画布的显示尺寸时，也更便于调整显示尺寸的参数。在此需要说明的是，画布标识符即为Canvas画布的唯一标识符，在创建Canvas标签时，自动按Canvas画布的高度和宽度的默认值进行设置，比如，画布高度和画布宽度的默认值分别225px和300px。其中，px是一个单位，表示像素，比如，300px即为300像素，225px即为225像素。当然，在生成预定义的Canvas画布的实际操作过程中，可根据显示屏幕尺寸对画布高度和画布宽度进行调整，即不按照画布高度和画布宽度的默认值进行设定。

在上述实施例的基础上，为了在生成Canvas画布的过程中，能够调用预先配置的集成模块，需在在检测到小程序中的Canvas画布生成触发操作之后，还包括步骤S2120：

S2120、将预先配置的集成模块加载到预设开发环境中。

其中，预设开发环境是根据不同的场景需求对Canvas画布进行绘制的开发环境。在实施例中，在小程序中绘制Canvas过程中，可使用JavaScript关键字import将预先配置的集成模块加载到预设开发环境中。其中，import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件(或模块)的原始值。可以理解为，基于前端开发性能的考虑，根据Canvas画布所要嵌入的移动终端的不同设备机型进行适配，对Canvas画布中对应的基础元素进行集成封装，然后根据不同API函数对集成模块中的各个绘制参数进行初始化，以设置各个绘制参数的默认值，以完成集成模块的预先配置。在检测到小程序中的Canvas画布生成操作时，通过import导入集成模块的默认值至预设开发环境中，以便于后续可根据待生成Canvas画布属性直接调用集成模块中对应的绘制参数，无法对不同设计需求分别调用功能相同的API函数，实现了核心代码的集成复用，降低了代码冗余度，同时优化了小程序代码内存。

实施例三

图5是本发明实施例三提供的一种小程序中Canvas画布生成的方法的流程图。本实施例是在上述实施例的基础上，进一步地对小程序中Canvas画布生成的方法进行说明。

在此需要说明的是，在生成Canvas画布之前，需对所要调用的集成模块进行预先配置。图6是本发明实施例三提供的一种集成模块配置方法的流程图。参考图6，该集成模块配置方法具体包括如下步骤：

S410、获取Canvas画布的基础元素。

其中，基础元素至少包括文本、图片和图形之一。

S420、集成基础元素后封装，得到集成模块。

S430、是否对用于绘制的API函数进行配置，若否，则执行步骤S440；若否，则执行步骤S450。

S440、根据小程序中用于绘制的API函数配置集成模块的初始化默认值。

在实施例中，为了在后续根据待生成Canvas画布属性可根据调用集成模块中的API函数，需预先对集成模块中的API函数对应的绘制参数进行初始化，以设置默认值。其中，API函数可包括尺寸、颜色、对齐方式、坐标位置等属性信息；并且，每个API函数所对应的绘制参数也是不同的，可根据实际情况，对API函数的绘制参数进行设置。

S450、将配置后的集成模块置于Promise实例的已决处理函数中。

当然，在对Canvas画布的基础元素进行集成封装时，若在基础元素中已经完成对基础元素对应的不同API函数的绘制参数的配置，可不需执行步骤S440，可直接将配置后的集成模块放入Promise实例的已决处理函数中。

S460、返回Promise实例对应的异步执行函数。

可以理解为，在对API函数进行配置时，每个API函数配置完成后，均需返回一个回调函数，若对大量的API函数进行配置时，若需通过程序代码对API函数均设置一个回调函数，会使得开发变得笨重，并且代码冗余度也会过高，大大降低了代码开发效率。在实施例中，可将构建完成后的Promise实例对应异步执行函数作为回调函数的调用结果进行返回，从而不同的API函数均可以同一个异步执行函数进行返回，大大降低了代码冗余度，提高了代码开发效率。

参照图5，该小程序中Canvas画布生成的方法具体包括如下步骤：

S310、检测到小程序中的Canvas画布生成触发操作时，将预先配置的集成模块加载到预设开发环境中。

S320、获取显示屏幕尺寸。

S330、创建Canvas标签。

S340、根据显示屏幕尺寸设置画布高度、画布宽度和画布标识符，生成与Canvas标签对应的预定义的Canvas画布。

在此需要说明的是，画布标识符为Canvas画布的唯一标识符，记为Canvas-id。其中，同一页面的Canvas-id是不可重复的，若使用一个已经出现过的Canvas-id，该Canvas标签对应的预先定义的Canvas画布将被隐藏并不再正常工作。当然，获取Canvas-id的方式可以有多种，比如，可通过小程序中原生API方法wx.createCanvasContext，用来获取该Canvas画布的唯一标识符。

S350、获取待生成Canvas画布属性和预先创建的预先定义的Canvas画布。

其中，预先定义的Canvas画布包括Canvas画布的唯一标识符、画布高度和画布宽度。在对预先定义的Canvas画布进行绘制的过程中，为了避免将同一个待生成Canvas画布属性对应的绘制参数加载至其它预先定义的Canvas画布中，需根据Canvas画布的唯一标识符对不同的预先定义的Canvas画布进行区分。

S360、根据待生成Canvas画布属性调用预先配置的集成模块。

在实施例中，根据产品的不同设计需求，调用功能逻辑相匹配的预先配置的集成模块。在此需要说明的是，为了便于开发人员能准确高效地调用集成模块，可根据功能逻辑的不同，设置不同的集成模块。比如，可根据移动终端的产品类型，对集成模块进行区分。其中，可采用不同集成模块标识来对各个集成模块进行区分，比如，若移动终端为智能手机，其对应的集成模块标识为10；若移动终端为ipad，其对应的集成模块标识为11，等等。

S370、通过调用的集成模块加载绘制参数至预定义的Canvas画布，生成对应的Canvas画布。

在实施例中，通过集成模块中的API函数将待生成Canvas画布属性对应的绘制参数加载至预定义的Canvas画布中。当然，开发人员也可自定义API函数对应的绘制参数，将绘制参数动态加载到预定义的Canvas画布中。

本实施例的技术方案，无需多次对Canvas画布中的API函数配置对应的相关绘制参数和回调函数，即可实现动态绘制小程序中的Canvas画布，减少了开发时间成本，提高了整体的开发效率。同时，无需对分别调用功能相同的Canvas画布中用于绘制的API函数，即可实现核心代码集成复用，代码结构更为清晰，避免了冗余代码，优化小程序代码内存，提升页面加载速度，从而更好的提高用户体验。

实施例四

图7是本发明实施例四提供的一种小程序中Canvas画布生成的装置的结构框图。本实施例的小程序中Canvas画布生成的装置可配置于服务器中，参考图7，该小程序中Canvas画布生成的装置包括：第一获取模块510、调用模块520和第一生成530。

其中，第一获取模块510，用于检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；

调用模块520，用于根据待生成Canvas画布属性调用预先配置的集成模块；

第一生成模块530，用于通过调用的集成模块加载绘制参数至预定义的Canvas画布，生成对应的Canvas画布。

本实施例提供的技术方案，通过检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；根据待生成Canvas画布属性调用预先配置的集成模块；通过调用的集成模块加载绘制参数至预定义的Canvas画布，生成对应的Canvas画布。本发明实施例可通过待生成Canvas画布属性直接调用预先配置的集成模块，以将对应的绘制参数加载至预定义的Canvas画布中，即可生成对应的Canvas画布，无需对根据待生成Canvas画布属性对绘制参数进行单独配置，即也无需多次对绘制参数对应的程序代码进行调整，降低了代码冗余度，提升了Canvas画布的加载速度，从而提升了用户的使用体验。

在上述实施例的基础上，所述装置，还包括：

第二获取模块，用于在检测到小程序中的Canvas画布生成触发操作之前，获取Canvas画布的基础元素，该基础元素至少包括文本、图片和图形之一；

集成封装模块，用于集成基础元素后封装，得到集成模块；

配置模块，用于根据小程序中用于绘制的API函数配置集成模块的初始化默认值；

放置模块，用于将配置后的集成模块置于Promise实例的已决处理函数中。

在上述实施例的基础上，所述装置，还包括：

第二生成模块，用于在获取Canvas画布的基础元素之前，通过Promise构造函数创建Promise实例；所述Promise实例包括已决处理函数和未决处理函数，该已决处理函数用于表示Promise实例的异步操作已成功结束的函数，未决处理函数用于表示Promise实例的异步操作未成功结束的函数。

在上述实施例的基础上，所述装置，还包括：

第三获取模块，用于在获取待生成Canvas画布属性和预先创建的预定义的Canvas画布之前，获取显示屏幕尺寸；

创建模块，用于根据显示屏幕尺寸创建预定义的Canvas画布。

在上述实施例的基础上，所述创建模块，包括：

创建单元，用于创建Canvas标签；

生成单元，用于根据显示屏幕尺寸设置画布高度、画布宽度和画布标识符，生成与Canvas标签对应的预定义的Canvas画布。

在上述实施例的基础上，所述装置，还包括：

加载模块，用于在检测到小程序中的Canvas画布生成触发操作之后，将预先配置的集成模块加载到预设开发环境中。

上述小程序中Canvas画布生成的装置可执行本发明任意实施例所提供的小程序中Canvas画布生成的方法，具备执行方法相应的功能模块和有益效果。

实施例五

图8是本发明实施例五提供的一种设备的结构示意图。参考图8，该设备包括：处理器610、存储器620、输入装置630以及输出装置640。该设备中处理器610的数量可以是一个或者多个，图8中以一个处理器610为例。该设备中存储器620的数量可以是一个或者多个，图8中以一个存储器620为例。该设备的处理器610、存储器620、输入装置630以及输出装置640可以通过总线或者其他方式连接，图8中以通过总线连接为例。实施例中，该设备为服务器。

存储器620作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明任意实施例所述的设备对应的程序指令/模块(例如，小程序中Canvas画布生成的装置中的第一获取模块510、调用模块520和第一生成模块530)。存储器620可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据设备的使用所创建的数据等。此外，存储器620可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器620可进一步包括相对于处理器610远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置630可用于接收输入的数字或者字符信息，以及产生与设备的用户设置以及功能控制有关的键信号输入，还可以是用于获取图像的摄像头以及获取音频数据的拾音设备。输出装置640可以包括扬声器等音频设备。需要说明的是，输入装置630和输出装置640的具体组成可以根据实际情况设定。

处理器610通过运行存储在存储器620中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述的小程序中Canvas画布生成的方法。

上述提供的设备可用于执行上述任意实施例提供的小程序中Canvas画布生成的方法，具备相应的功能和有益效果。

实施例六

本发明实施例六还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种小程序中Canvas画布生成的方法，包括：

检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；

根据待生成Canvas画布属性调用预先配置的集成模块；

通过调用的集成模块加载绘制参数至预定义的Canvas画布，生成对应的Canvas画布。

当然,本发明实施例所提供的一种包含计算机可执行指令的存储介质,其计算机可执行指令不限于如上所述的小程序中Canvas画布生成的方法操作,还可以执行本发明任意实施例所提供的小程序中Canvas画布生成的方法中的相关操作，且具备相应的功能和有益效果。

通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本发明可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是机器人，个人计算机，服务器，或者网络设备等)执行本发明任意实施例所述的小程序中Canvas画布生成的方法。

值得注意的是，上述小程序中Canvas画布生成的装置中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (12)

1.一种小程序中Canvas画布生成的方法，其特征在于，包括：

检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；

根据所述待生成Canvas画布属性调用预先配置的集成模块；

通过调用的集成模块加载绘制参数至所述预定义的Canvas画布，生成对应的Canvas画布；

在检测到小程序中的Canvas画布生成触发操作之前，还包括：

获取Canvas画布的基础元素，所述基础元素至少包括文本、图片和图形之一；

集成所述基础元素后封装，得到集成模块；

根据所述小程序中用于绘制的API函数配置集成模块的初始化默认值；

将配置后的集成模块置于Promise实例的已决处理函数中。

2.根据权利要求1所述的方法，其特征在于，在获取Canvas画布的基础元素之前，还包括：

通过Promise构造函数创建Promise实例；所述Promise实例包括已决处理函数和未决处理函数，所述已决处理函数用于表示Promise实例的异步操作已成功结束的函数，未决处理函数用于表示Promise实例的异步操作未成功结束的函数。

3.根据权利要求1所述的方法，其特征在于，在获取待生成Canvas画布属性和预定义的Canvas画布之前，还包括：

获取显示屏幕尺寸；

根据所述显示屏幕尺寸创建预定义的Canvas画布。

4.根据权利要求3所述的方法，其特征在于，根据所述显示屏幕尺寸创建预定义的Canvas画布，包括：

创建Canvas标签；

根据所述显示屏幕尺寸设置画布高度、画布宽度和画布标识符，生成与所述Canvas标签对应的预定义的Canvas画布。

5.根据权利要求1所述的方法，其特征在于，在检测到小程序中的Canvas画布生成触发操作之后，还包括：

将预先配置的集成模块加载到预设开发环境中。

6.一种小程序中Canvas画布生成的装置，其特征在于，包括：

第一获取模块，用于检测到小程序中的Canvas画布生成触发操作时，获取待生成Canvas画布属性和预先创建的预定义的Canvas画布；

调用模块，用于根据所述待生成Canvas画布属性调用预先配置的集成模块；

第一生成模块，用于通过调用的集成模块加载绘制参数至所述预定义的Canvas画布，生成对应的Canvas画布；

第二获取模块，用于在检测到小程序中的Canvas画布生成触发操作之前，获取Canvas画布的基础元素，所述基础元素至少包括文本、图片和图形之一；

集成封装模块，用于集成所述基础元素后封装，得到集成模块；

配置模块，用于根据所述小程序中用于绘制的API函数配置集成模块的初始化默认值；

放置模块，用于将配置后的集成模块置于Promise实例的已决处理函数中。

7.根据权利要求6所述的装置，其特征在于，还包括：

第二生成模块，用于在获取Canvas画布的基础元素之前，通过Promise构造函数创建Promise实例；所述Promise实例包括已决处理函数和未决处理函数，所述已决处理函数用于表示Promise实例的异步操作已成功结束的函数，未决处理函数用于表示Promise实例的异步操作未成功结束的函数。

8.根据权利要求6所述的装置，其特征在于，还包括：

第三获取模块，用于在获取待生成Canvas画布属性和预定义的Canvas画布之前，获取显示屏幕尺寸；

创建模块，用于根据所述显示屏幕尺寸创建预定义的Canvas画布。

9.根据权利要求8所述的装置，其特征在于，所述创建模块，包括：

创建单元，用于创建Canvas标签；

生成单元，用于根据所述显示屏幕尺寸设置画布高度、画布宽度和画布标识符，生成与所述Canvas标签对应的预定义的Canvas画布。

10.根据权利要求6所述的装置，其特征在于，还包括：

加载模块，用于在检测到小程序中的Canvas画布生成触发操作之后，将预先配置的集成模块加载到预设开发环境中。

11.一种计算机设备，其特征在于，包括：存储器以及一个或多个处理器；

所述存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的小程序中Canvas画布生成的方法。

12.一种包含计算机可执行指令的存储介质，其特征在于，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-5中任一所述的小程序中Canvas画布生成的方法。

Images