CN115564883A - 图像渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请的实施方式提供了一种图像渲染方法、装置、电子设备及存储介质。该图像渲染方法包括：获取图像渲染参数以及设备显示参数，图像渲染参数包括图像渲染数据以及图像渲染配置；基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则；若图像渲染规则与图像设定规则相匹配，则将第一画布图层重叠于第二画布图层之上；根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像。本申请的方法能够解决单一画布图层在绘制时会产生大量无效渲染的问题，从而解决因内存占用过高而导致页面卡顿的问题，从整体上提升图像渲染性能。

Description

图像渲染方法、装置、电子设备及存储介质

技术领域

本申请的实施方式涉及计算机领域，更具体地，本申请的实施方式涉及图像渲染方法、装置、电子设备及存储介质。

背景技术

本部分旨在为权利要求书中陈述的本申请的实施方式提供背景或上下文。此处的描述可包括可以探究的概念，但不一定是之前已经想到或者已经探究的概念。因此，除非在此指出，否则在本部分中描述的内容对于本申请的说明书和权利要求书而言不是现有技术，并且并不因为包括在本部分中就承认是现有技术。

当前的素质教育行业蓬勃发展，其中，在线的棋类应用层出不穷，在众多棋类应用当中，棋盘是棋类应用中是必不可少的核心工具，需要考虑棋盘在渲染上、动画上的效果以及所占用的运行内存，以提升用户体验。基于JavaScript开发的棋盘平台可以适用于小程序、PC浏览器、移动端浏览器和App，而由于Canvas API是JavaScript API，所以基于JavaScript开发的棋盘平台还支持在服务器端进行渲染以实现渲染生成图片的功能，方便在棋类应用中进行处理。

在现有技术中，已经出现一些基于JavaScript的棋盘平台，用于渲染处理棋盘，但多数是由单一canvas渲染而成，或者是通过普通HTML标签组成，其缺点明显，基于单一canvas绘制会带来大量无效的渲染，例如棋盘盘面、棋盘线、图像背景等，导致占用的运行内存过高。而普通HTML标签渲染在移动设备上也存在明显的性能问题，尤其一些偏旧设备的情况下容易渲染卡顿，并且在应用场景中不支持棋盘棋子皮肤的定制。

因此，需要提出一种能够解决在绘制图像时容易占用运行内存过高以及容易出现卡顿现象等问题的方法，以提升绘制的图像的整体性能。

发明内容

为克服相关技术中存在的问题，特别是上文背景技术中所提到的问题，本申请提供一种图像渲染方法、装置、电子设备及存储介质，该图像渲染方法能够解决单一画布图层在绘制时会产生大量无效渲染的问题，从而解决因内存占用过高而导致页面卡顿的问题，从整体上提升图像渲染性能。

在本申请实施方式的第一方面中，提供了一种图像渲染方法，包括：

获取图像渲染参数以及设备显示参数，图像渲染参数包括图像渲染数据以及图像渲染配置；

基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则；渲染入口组件为待渲染的第一画布图层以及第二画布图层所需的渲染功能的调用入口；

若图像渲染规则与图像设定规则相匹配，则将第一画布图层重叠于第二画布图层之上；

根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像。

在一个实施例中，根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染之前，包括：

根据设备显示参数初始化显示配置，设备显示参数包括设备显示尺寸、设备显示比例以及显示像素比；

根据图像渲染规则确定画布缩放比例，图像渲染规则包括图像网格尺寸以及图像网格线路数量；

根据显示配置以及画布缩放比例构建第一画布图层以及第二画布图层。

在一个实施例中，根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染之前，还包括：

获取画像动态资源，画像动态资源包括元素添加动态以及元素消失动态；

基于图像渲染配置以及画像动态资源初始化设备缓存信息，图像渲染配置包括图像背景主题以及元素样式信息。

在一个实施例中，根据图像渲染规则对第一画布图层进行动态功能渲染，包括：

清空第一画布图层；

对第一画布图层的字体信息以及起始点坐标进行初始化；

监测元素变动事件，元素变动事件包括元素添加事件、添加确认事件以及元素消失事件；

若监测到元素添加事件，则执行选中渲染策略；以及

执行元素添加动态；

若监测到元素消失事件，则执行元素消失动态。

在一个实施例中，执行选中渲染策略，包括：

基于图像网格尺寸、画布缩放比例以及设备缓存信息确定当前元素添加坐标；

在当前元素添加坐标对应的位置上绘制元素添加动态；以及

在当前元素添加坐标对应的位置上绘制元素样式。

在一个实施例中，执行元素添加动态，包括：

清空上一次执行选中渲染策略时残留的画布绘制信息；

执行选中渲染策略；

监测添加确认事件；

若未监测到添加确认事件，则重新执行清空上一次执行选中渲染策略时残留的画布绘制信息至执行选中渲染策略的步骤；

若监测到添加确认事件，则停止执行元素添加动态；

其中，选中渲染策略的执行频率为预设频率。

在一个实施例中，执行元素消失动态，包括：

基于图像网格尺寸、画布缩放比例以及设备缓存信息确定消失元素坐标集合；

获取每一元素消失位置对应的元素消失动态；

在消失元素坐标集合中的每一元素消失位置坐标上绘制每一元素消失位置对应的元素消失动态；

每一元素消失位置分别执行对应的元素消失动态，直至所有元素消失位置均执行完毕。

在一个实施例中，根据图像渲染规则对第二画布图层进行静态功能渲染，包括：

清空第二画布图层；

基于图像背景主题在第二画布图层上绘制图像背景以及图像边框；

对第二画布图层的字体信息以及起始点坐标进行初始化；

绘制图像网格线路以及线路坐标数值；

绘制图像定位点；以及

渲染元素样式、图像标记和元素添加序号。

在一个实施例中，基于图像背景主题在第二画布图层上绘制图像背景以及图像边框，包括：

基于图像背景主题提取图像颜色；

根据图像颜色以及第二画布图层的画布尺寸绘制图像背景；

基于图像背景主题确定边框线宽度和边框线颜色；

根据边框线宽度、边框线颜色以及画布尺寸绘制图像边框。

在一个实施例中，绘制图像网格线路以及线路坐标数值，包括：

基于图像背景主题确定图像线路颜色、坐标字体和坐标颜色；

根据图像网格线路数量确定坐标数量；

根据图像网格线路数量、坐标数量、图像线路颜色、坐标字体和坐标颜色绘制图像网格线路以及线路坐标数值。

在一个实施例中，绘制图像定位点，包括：

根据图像网格线路数量确定定位点数量以及每一定位点对应的定位点坐标；

基于每一定位点对应的定位点坐标逐一绘制每一定位点，直至绘制定位点的数量达到定位点数量。

在一个实施例中，渲染元素样式、图像标记和元素添加序号，包括：

根据图像网格线路数量生成所有可添加元素位置对应的二维坐标数组；

判断二维坐标数组中的当前坐标项对应的可添加元素位置上是否存在元素；

若存在元素，则基于元素样式信息在当前坐标项对应的可添加元素位置绘制元素样式以及元素添加序号；并且判断当前坐标项对应的可添加元素位置是否存在图像标记，若存在，则在当前坐标项对应的可添加元素位置上渲染图像标记；

若不存在元素，则跳过当前坐标项；

直至二维坐标数组中的所有坐标项判断完成。

在一个实施例中，得到目标渲染图像之后，还包括：

通过渲染入口组件生成目标渲染图像对应的图片资源。

在一个实施例中，基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则之前，还包括：

基于渲染入口组件对图像渲染参数进行合法性校验；

若合法性校验通过，则执行基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则的步骤。

在一个实施例中，若图像渲染参数为棋盘渲染参数，则目标渲染图像为目标棋盘图像。

在本申请实施方式的第二方面中，提供了一种图像渲染装置，用于执行如第一方面中所述的图像渲染方法，包括：

获取模块，用于获取图像渲染参数以及设备显示参数，图像渲染参数包括图像渲染数据以及图像渲染配置；

规则确定模块，用于基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则；渲染入口组件为待渲染的第一画布图层以及第二画布图层所需的渲染功能的调用入口；

图层重叠模块，若图像渲染规则与图像设定规则相匹配，则用于将第一画布图层重叠于第二画布图层之上；

功能渲染模块，用于根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像。

在本申请实施方式的第三方面中，提供了一种电子设备，包括：处理器；以及存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如上所述的方法。

在本申请实施方式的第四方面中，提供了一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如上所述的方法。

根据本申请实施方式的图像渲染方法、装置、电子设备及存储介质，通过获取图像渲染参数以及设备显示参数，其中图像渲染参数包括图像渲染数据以及图像渲染配置，基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则；若图像渲染规则与图像设定规则相匹配，则将第一画布图层重叠于第二画布图层之上，根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像，解决了单一画布图层在绘制时会产生大量无效渲染的问题，从而解决了因内存占用过高而导致页面卡顿的问题，从整体上提升了图像渲染性能。

附图说明

通过参考附图阅读下文的详细描述，本申请示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本申请的若干实施方式，其中：

图1示意性地示出了适于实现本申请实施方式的示例性计算系统100的框图；

图2示意性地示出了根据本申请另一实施例的图像渲染方法；

图3示意性地示出了根据本申请又一实施例的图像渲染方法；

图4示意性地示出了根据本申请再一实施例的图像渲染方法；

图5示意性地示出了根据本申请又再一实施例的图像渲染方法；

图6示意性地示出了根据本申请实施例的图像渲染装置的示意框图；

图7示意性地示出了根据本发明实施例的电子设备的示意框图；

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

下面将参考若干示例性实施方式来描述本申请的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本申请，而并非以任何方式限制本申请的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

图1示出了适于实现本申请实施方式的示例性计算系统100的框图。如图1所示，计算系统100可以包括：中央处理单元(CPU)101、随机存取存储器(RAM)102、只读存储器(ROM)103、系统总线104、硬盘控制器105、键盘控制器106、串行接口控制器107、并行接口控制器108、显示控制器109、硬盘110、键盘111、串行外部设备112、并行外部设备113和显示器114。这些设备中，与系统总线104耦合的有CPU 101、RAM102、ROM 103、硬盘控制器105、键盘控制器106、串行控制器107、并行控制器108和显示控制器109。硬盘110与硬盘控制器105耦合，键盘111与键盘控制器106耦合，串行外部设备112与串行接口控制器107耦合，并行外部设备113与并行接口控制器108耦合，以及显示器114与显示控制器109耦合。应当理解，图1所述的结构框图仅仅是为了示例的目的，而不是对本申请范围的限制。在某些情况下，可以根据具体情况增加或减少某些设备_。

本领域技术技术人员知道，本申请的实施方式可以实现为一种系统、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式，本文一般称为“电路”、“模块”或“系统”。此外，在一些实施例中，本申请还可以实现为在一个或多个计算机可读介质中的计算机程序产品的形式，该计算机可读介质中包含计算机可读的程序代码。

可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是，但不限于，电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举示例)例如可以包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本申请操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络(包括局域网(LAN)或广域网(WAN))连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

下面将参照本申请实施例的方法的流程图和设备(或系统)的框图描述本申请的实施方式。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合都可以由计算机程序指令实现。这些计算机程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，这些计算机程序指令通过计算机或其它可编程数据处理装置执行，产生了实现流程图和/或框图中的方框中规定的功能/操作的装置。

也可以把这些计算机程序指令存储在能使得计算机或其它可编程数据处理装置以特定方式工作的计算机可读介质中，这样，存储在计算机可读介质中的指令就产生出一个包括实现流程图和/或框图中的方框中规定的功能/操作的指令装置的产品。

也可以把计算机程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机或其它可编程装置上执行的指令能够提供实现流程图和/或框图中的方框中规定的功能/操作的过程。

根据本申请的实施方式，提出了一种图像渲染方法和设备。

在本文中，需要理解的是，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。

下面参考本申请的若干代表性实施方式，详细阐释本申请的原理和精神。

发明概述

本申请人发现，现有技术的单一画布图层在绘制时会产生大量无效渲染的问题，在绘制图像时容易产生占用运行内存过高以及容易出现卡顿现象等问题，导致图像渲染性能受影响，用户体验受到影响。

基于此，本申请技术方案通过获取图像渲染参数以及设备显示参数，其中图像渲染参数包括图像渲染数据以及图像渲染配置，基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则；若图像渲染规则与图像设定规则相匹配，则将第一画布图层重叠于第二画布图层之上，根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像，解决了单一画布图层在绘制时会产生大量无效渲染的问题，从而解决了因内存占用过高而导致页面卡顿的问题，从整体上提升了图像渲染性能。

在介绍了本申请的基本原理之后，下面具体介绍本申请的各种非限制性实施方式。

应用场景总览

本申请实施方式的图像渲染方法适用于任一个需要图像渲染的场景，例如渲染围棋棋盘、国际象棋棋盘和中国象棋棋盘等，或者在桌面游戏中渲染游戏桌面等等。

上述图像渲染方法可以应用于具有图像渲染功能的应用程序或多种的电子设备，例如是棋类学习设备，或者是棋类竞技网站，又或者是桌面游戏应用等，以能够避免用户在使用这些设备、程序或者网站时会出现页面卡顿的情况，提升用户的使用体验感。

示例性方法

下面参考图2来描述根据本申请示例性实施方式的图像渲染方法。需要注意的是，上述应用场景仅是为了便于理解本申请的精神和原理而示出，本申请的实施方式在此方面不受任何限制。相反，本申请的实施方式可以应用于适用的任何场景。

图2示意性地示出了根据本申请另一实施例的图像渲染方法，请参阅图2，本申请实施例示出的图像渲染方法可以包括：

在步骤201中，获取图像渲染参数以及设备显示参数。其中，图像渲染参数包括图像渲染数据以及图像渲染配置，图像渲染数据示例性的可以是通过智能游戏格式SGF生成的用于渲染的二维数组数据，SGF是纯文本格式，基于树形结构，游戏对局信息的存盘文件可以在网络上进行发送，或者使用基于文本的传输协议进行传送，能够用一些规定的标识字符表示待渲染的图像的各种信息。该二维数组数据的生成方式可以是通过引用开源库生成树结构，然后对树结构进行转换后进行生成。可以理解的是，在实际应用中，该二维数组数据的生成方式是多样的，需根据实际应用情况而定，此处不作唯一限定。

另外，图像渲染配置则是包含是否进行图像缩放以及图像主题样式等的配置，其中，图像主题样式可以包括但不限于图像上的线条形态、线条颜色、元素样式和元素样式等。

设备显示参数则是包含但不限于显示比例、显示尺寸以及分辨率等参数，可以在进行图像渲染的设备中进行查询得到。

在步骤202中，基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则。

在本申请实施例中，渲染入口组件为待渲染的第一画布图层以及第二画布图层所需的渲染功能的调用入口，示例性的，渲染入口组件可以采用GoBanUI和/或StaticGoBan等，可以理解的是，在实际应用中，需根据实际应用情况选取合适的渲染入口组件，此处不作唯一限定。

图像渲染参数传入渲染入口组件中执行，根据图像渲染参数以及设备显示参数确定图像渲染规则。图像渲染规则为图像在绘制时需要遵守的规则，例如是图像网格尺寸以及图像网格线路数量等，以使得最终图像能够呈现所需要的形态。

在步骤203中，若图像渲染规则与图像设定规则相匹配，则将第一画布图层重叠于第二画布图层之上。

图像设定规则是指图像呈现出客观固定形态时的绘制规则，示例性的，例如所需渲染的是围棋棋盘，围棋棋盘在客观固定形态上具有固定的线路数量和网格尺寸，因此，生成出来的图像渲染规则需要与图像设定规则相匹配，才能渲染出与围棋棋盘客观形态相匹配的围棋棋盘。

在本申请实施例中，目标渲染图像为双层画布图像，分为上层画布和下层画布，上层画布即是第一画布图层，下层画布则是第二画布图层，需要将上层画布和下层画布进行上下重叠设置，可以理解的是，上层画布不需要渲染背景，使得其背景透明，以能够显示出下层画布中的图像背景。

在步骤204中，根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像。

在本申请实施例中，可以采用JavaScript的canvas API进行渲染，canvas是指画布，作为一个允许他人进行绘制的一个UI容器，在前端领域中也属于前端HTML的一个标签元素，它没有自己的行为，但是定义了一个API支持绘图操作，其功能主要用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图。API是指应用程序界面。可以理解的是，动态功能渲染是对图像上需要进行动态变化的元素进行渲染，而静态功能渲染是对图像上无需进行动态变化的固定样式进行渲染，示例性的，例如所需渲染的是围棋棋盘，那么围棋棋盘上的围棋棋子则会动态变化，需要对其进行动态功能渲染，而棋盘背景和棋盘线路等则是围棋棋盘的固定样式，需要对其进行静态功能渲染，能够避免固定样式的重复绘制带来大量无效的渲染，降低发生页面卡顿的几率，提升图像渲染的整体性能。

通过获取图像渲染参数以及设备显示参数，其中图像渲染参数包括图像渲染数据以及图像渲染配置，基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则；若图像渲染规则与图像设定规则相匹配，则将第一画布图层重叠于第二画布图层之上，根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像，解决了单一画布图层在绘制时会产生大量无效渲染的问题，从而解决了因内存占用过高而导致页面卡顿的问题，从整体上提升了图像渲染性能。

在一些实施例中，在确定图像渲染规则之前还需要进行图像渲染参数的合法性校验，在进行动态和静态功能渲染之前还需要进行构建第一画布图层以及第二画布图层的操作以及初始化设备缓存信息的操作。图3示意性地示出了根据本申请又一实施例的图像渲染方法，请参阅图3，本申请实施例示出的图像渲染方法可以包括：

在步骤301中，获取图像渲染参数以及设备显示参数。

在本申请实施例中，步骤301的内容和步骤201的内容实质一致，此处不作赘述。

在步骤302中，基于渲染入口组件对图像渲染参数进行合法性校验。

在本申请实施例中，图像渲染参数传入渲染入口组件后，在渲染入口组件执行该参数之前渲染入口组件会对图像渲染参数进行合法性校验，合法性校验实质上是对图像渲染参数的数据类型进行校验，高级编程语言中存在数据类型的概念，如果数据类型不正确，那么操作就会引起程序报错；如果不进行合法性校验也会出现程序的报错，无法执行之后的操作流程，整个渲染都会被中断而无法继续；如果进行了合法性校验则可以避免上述的情况，严谨的规范参数能够有效防止出现不必要的参数造成程序错误。

若合法性校验通过，则执行基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则的步骤。

在步骤303中，基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则。

在本申请实施例中，步骤303的内容和步骤202的内容实质一致，此处不作赘述。

在步骤304中，若图像渲染规则与图像设定规则相匹配，则将第一画布图层重叠于第二画布图层之上。

在本申请实施例中，步骤304的内容和步骤203的内容实质一致，此处不作赘述。

在步骤305中，构建第一画布图层以及第二画布图层。

首先，可以调用类的构造函数，根据设备显示参数初始化显示配置，设备显示参数包括但不限于设备显示尺寸、设备显示比例以及显示像素比，使得待渲染图像的显示配置能够与当前设备的显示参数匹配，使得图像的大小不会超出设备显示范围。类(Class)是面向对象程序设计实现信息封装的基础。类是一种用户定义的引用数据类型，也称类类型。每个类包含数据说明和一组操作数据或传递消息的函数。类的实例称为对象。类的实质是一种引用数据类型，类似于byte、short、int(char)、long、float、double等基本数据类型，不同的是它是一种复杂的数据类型。因为它的本质是数据类型，而不是数据，所以不存在于内存中，不能被直接操作，只有被实例化为对象时，才会变得可操作。类是对现实生活中一类具有共同特征的事物的抽象。如果一个程序里提供的数据类型与应用中的概念有直接的对应，这个程序就会更容易理解，也更容易修改。类的内部封装了属性和方法，用于操作自身。而每一个类都会有相应的构造函数。

然后，根据图像渲染规则确定画布缩放比例，图像渲染规则包括但不限于图像网格尺寸以及图像网格线路数量，可以理解的是，若图像网格线路数量过多或者过少，则需要对图像进行缩放，以能够清晰完整地显示图像。

接着，根据显示配置以及画布缩放比例构建第一画布图层以及第二画布图层。

在步骤306中，基于图像渲染配置以及画像动态资源初始化设备缓存信息。

获取画像动态资源，其中，画像动态资源包括元素添加动态以及元素消失动态，可以采用preloadEatStoneImage方法提前加载元素添加动态的资源，防止后续渲染绘制过程中出现加载卡顿或者动画丢失的问题。具体地，preloadEatStoneImage方法的实现则是通过JavaScript的内置API Image类进行实例化设置资源路径来让浏览器自动发起获取资源的请求并返回，然后把返回的资源信息保存到缓存对象中。在实际应用中，加载动态资源的方式是多样的，需根据实际应用情况确定加载方式，此处不作唯一限定。

基于图像渲染配置以及画像动态资源初始化设备缓存信息，图像渲染配置包括图像背景主题以及元素样式信息，使得在渲染过程中能够方便调用图像渲染配置以及画像动态资源。

在步骤307中，根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像。若图像渲染参数为棋盘渲染参数，则目标渲染图像为目标棋盘图像。

在步骤308中，通过渲染入口组件生成目标渲染图像对应的图片资源。

在本申请实施例中，可以调用Canvas API自带的toDataURL方法，生成对应当前状态下的图片资源，一方面浏览器端的执行代码是单线程的，在处理生成图片的过程中会占用浏览器资源，但又因为JavaScript的跨平台特性，CanvasAPI也同时支持在服务器端上执行，对此，可以将RenderBoard类代码移植到服务端中运行，实例化并调用自带的方法生成图片，这时通过大量实例化，能够在服务器上实现批量生成图片的功能，且不阻塞浏览器正常执行流程。可以理解的是，在实际应用中，生成图片资源的方式是多样的，需根据实际应用情况选择合适的方式，此处不作唯一限定。在浏览器端和客户端都可以快速生成图片，无论是批量生成图片的场景还是本地快速截图功能都能很好的实现。

在一些实施例中，根据图像渲染规则对第一画布图层进行动态功能渲染以完成对上层画布的绘制。图4示意性地示出了根据本申请再一实施例的图像渲染方法，请参阅图4，本申请实施例示出的图像渲染方法可以包括：

在步骤401中，清空第一画布图层，对第一画布图层的字体信息以及起始点坐标进行初始化。

在本申请实施例中，可以调用canvas API的DynamicRenderBoard来处理第一画布图层的渲染，不作唯一限定。首先需要对第一画布图层进行情况，保持第一画布图层的洁净，然后可以调用init方法对字体信息以及起始点坐标进行初始化，此时基本上完成动态功能渲染的初始化信息处理。

其中，init方法具体为：获取canvas API实例对象，对canvas API实例对象上内置的font属性进行设置字体，对textAlign设置居中文字样式，计算出边框的大小，验证是否需要调用内置scale方法进行整体缩放，最终调用内置translate方法设置绘制起始点的坐标，为后续的动画、线条、标记和棋子的渲染做位置调整。

在步骤402中，监测元素变动事件，若监测到元素添加事件，则执行选中渲染策略以及执行元素添加动态。元素变动事件包括但不限于元素添加事件、添加确认事件以及元素消失事件。若目标渲染图像为目标棋盘图像，那么元素则是棋盘上的棋子。可以理解的是，若棋盘是围棋棋盘，那么棋子则是围棋棋子。

以目标渲染图像为目标棋盘图像为例子，元素添加事件可以是用户的鼠标指向某个位置并停留一定时间的事件，也可以是用户的鼠标在某个位置进行单击的事件，需根据实际应用情况而定，此处不作唯一限定。

当监测到元素添加事件，则进一步地基于图像网格尺寸、画布缩放比例以及设备缓存信息确定当前元素添加坐标，在棋盘中则是相当于计算出落子点的坐标位置。进而在当前元素添加坐标对应的位置上绘制元素添加动态，以及在当前元素添加坐标对应的位置上绘制元素样式，在棋盘中则是绘制棋子添加动画以及棋子样式，因此也能够满足棋子皮肤定制的需求。

由于此时处于在某个位置上欲要添加元素的阶段，因此还不能直接绘制完元素添加动态和元素样式就结束，需要进一步地清空上一次执行选中渲染策略时残留的画布绘制信息，之后再重新执行选中渲染策略，以能够实现元素忽隐忽现的闪烁效果。其中，选中渲染策略的执行频率为预设频率，预设频率可以设置为每隔一秒执行一次，需根据实际应用情况而定，此处不作唯一限定。

在此过程中一直会监测添加确认事件，添加确认事件可以是用户的鼠标在某个位置进行双击的事件，也可以是其他形式，需根据实际应用情况而定，此处不作唯一限定。若未监测到添加确认事件，则重新执行清空上一次执行选中渲染策略时残留的画布绘制信息至执行选中渲染策略的步骤；若监测到添加确认事件，则停止执行元素添加动态。

在步骤403中，监测元素变动事件，若监测到元素消失事件，则执行元素消失动态。以目标渲染图像为目标棋盘图像为例子，元素消失事件则是棋子被吃掉的事件。

当监测到元素消失事件，则进一步基于图像网格尺寸、画布缩放比例以及设备缓存信息确定消失元素坐标集合，在棋盘中则是相当于计算出各个被吃掉的棋子的坐标位置，并且由各个被吃掉的棋子的坐标位置组成该消失元素坐标集合。

获取每一元素消失位置对应的元素消失动态，即是获取每一个消失的元素的位置上分别需要执行的元素消失动态，进而在消失元素坐标集合中的每一元素消失位置坐标上绘制每一元素消失位置对应的元素消失动态。每一元素消失位置分别执行对应的元素消失动态，直至所有元素消失位置均执行完毕，那么此时当前的元素消失事件也发生完毕。

在一些实施例中，根据图像渲染规则对第二画布图层进行静态功能渲染以完成对下层画布的绘制。图5示意性地示出了根据本申请又再一实施例的图像渲染方法，请参阅图5，本申请实施例示出的图像渲染方法可以包括：

在步骤501中，清空第二画布图层，基于图像背景主题在第二画布图层上绘制图像背景以及图像边框。

首先对第二画布图层进行清空，让第二画布图层呈现无内容状态。然后可以进一步地依据图像背景主题，在第二画布图层上通过调用canvas API内置的renderBg方法绘制图像背景以及图像边框，示例性的，以目标渲染图像为目标棋盘图像为例子，图像背景主题为围棋背景主题，围棋背景主题可以是多种样式的，满足棋盘皮肤定制的需求。图像边框也可以设置边框颜色和边框尺寸大小等。

具体地，可以基于图像背景主题提取图像颜色，根据图像颜色以及第二画布图层的画布尺寸绘制图像背景；进而基于图像背景主题确定边框线宽度和边框线颜色，根据边框线宽度、边框线颜色以及画布尺寸绘制图像边框。

在步骤502中，对第二画布图层的字体信息以及起始点坐标进行初始化。

在本申请实施例中，步骤502的内容与步骤401中进行字体信息以及起始点坐标初始化的内容实质一致，此处不再赘述。

在步骤503中，绘制图像网格线路以及线路坐标数值。

基于图像背景主题确定图像线路颜色、坐标字体和坐标颜色，根据图像网格线路数量确定坐标数量，从而根据图像网格线路数量、坐标数量、图像线路颜色、坐标字体和坐标颜色绘制图像网格线路以及线路坐标数值。

以目标渲染图像为目标棋盘图像为例子，假设棋盘为19路围棋棋盘，每一线路，不论是横向线路还是竖向线路，都会有线路序号进行标记，该线路序号即可以视为本申请实施例中的坐标，坐标数量与图像网格线路数量呈正相关关系，也可以理解的是，可以通过设置图像渲染配置来确定是否显示该坐标，需根据实际应用情况而定，不作唯一限定。

在步骤504中，绘制图像定位点。

根据图像网格线路数量确定定位点数量以及每一定位点对应的定位点坐标，基于每一定位点对应的定位点坐标逐一绘制每一定位点，直至绘制定位点的数量达到定位点数量。以围棋棋盘为例，围棋棋盘上的定位点即是星位，正规的围棋棋盘形状为正方形，上书横竖各十九道平行线，构成三百六十一个交叉点。其中有九个交叉点用大黑点标识，以方便定位，这九个黑点称之为“星”。星位具体的绘制方式示例性的可以是首先绘制星位的圆形外框，然后在对圆形外框进行颜色填充，不作唯一限定。

在步骤505中，渲染元素样式、图像标记和元素添加序号。

根据图像网格线路数量生成所有可添加元素位置对应的二维坐标数组，判断二维坐标数组中的当前坐标项对应的可添加元素位置上是否存在元素，若存在元素，则基于元素样式信息在当前坐标项对应的可添加元素位置绘制元素样式以及元素添加序号；并且判断当前坐标项对应的可添加元素位置是否存在图像标记，若存在，则在当前坐标项对应的可添加元素位置上渲染图像标记。另外，若不存在元素，则跳过当前坐标项，直至二维坐标数组中的所有坐标项判断完成。

以围棋棋盘为例，可添加元素位置即是围棋棋盘上的交叉点；元素添加序号则可以理解为围棋的手数，即下子顺序序号；图像标记则可理解为需要为具有特殊意义的或者需要特别记录下子位置的棋子而作出的标记。

可以理解的是，步骤503至步骤505可以是先后执行，也可以是同时执行，需根据实际应用情况而定，此处不作唯一限定。

示例性设备

在介绍了本申请示例性实施方式的方法之后，接下来，参考图6和图7对本发明示例性实施方式的图像渲染方法的相关产品进行描述。

图6示意性地示出了根据本申请实施例的图像渲染装置的示意框图，请参与图6，本申请实施例示出的图像渲染装置可以包括：

获取模块601，用于获取图像渲染参数以及设备显示参数，图像渲染参数包括图像渲染数据以及图像渲染配置；

规则确定模块602，用于基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则；渲染入口组件为待渲染的第一画布图层以及第二画布图层所需的渲染功能的调用入口；

图层重叠模块603，若图像渲染规则与图像设定规则相匹配，则用于将第一画布图层重叠于第二画布图层之上；

功能渲染模块604，用于根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像。

基于上述通过获取图像渲染参数以及设备显示参数，其中图像渲染参数包括图像渲染数据以及图像渲染配置，基于渲染入口组件，根据图像渲染参数以及设备显示参数确定图像渲染规则；若图像渲染规则与图像设定规则相匹配，则将第一画布图层重叠于第二画布图层之上，根据图像渲染规则对第一画布图层进行动态功能渲染，以及根据图像渲染规则对第二画布图层进行静态功能渲染，得到目标渲染图像，解决了单一画布图层在绘制时会产生大量无效渲染的问题，从而解决了因内存占用过高而导致页面卡顿的问题，从整体上提升了图像渲染性能。

图7示意性地示出了根据本发明实施例的电子设备700的示意框图。如图7所示，电子设备700可以包括：

处理器701；以及

存储器702，其存储有计算机指令，当所述计算机指令由所述处理器701运行时，使得所述电子设备700执行根据前文多个实施例所述的方法。

在一些实施场景中，电子设备700可以包括服务器或者终端设备，例如物理服务器、云端服务器、服务器集群、数据处理装置、应用测试机器人、电脑终端、智能终端、PC设备和物联网终端等等。

处理器701可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

基于上文，本申请还公开了一种计算机可读存储介质，包含程序指令，当所述程序指令由处理器执行时，使得实现根据前文多个实施例所述的方法。

在一些实施场景中，上述计算机可读存储介质可以是任何适当的磁存储介质或者磁光存储介质，比如，阻变式存储器RRAM(Resistive Random Access Memory)、动态随机存取存储器DRAM(Dynamic Random Access Memory)、静态随机存取存储器SRAM(StaticRandom-Access Memory)、增强动态随机存取存储器EDRAM(Enhanced Dynamic RandomAccess Memory)、高带宽内存HBM(High-Bandwidth Memory)、混合存储立方HMC(HybridMemory Cube)等等，或者可以用于存储所需信息并且可以由应用程序、模块或两者访问的任何其他介质。任何这样的计算机存储介质可以是设备的一部分或可访问或可连接到设备。本发明描述的任何应用或模块可以使用可以由这样的计算机可读介质存储或以其他方式保持的计算机可读/可执行指令来实现。

应当注意，尽管在上文详细描述中提及了图像渲染方法的若干装置或子装置，但是这种划分仅仅并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多装置的特征和功能可以在一个装置中具体化。反之，上文描述的一个装置的特征和功能可以进一步划分为由多个装置来具体化。

此外，尽管在附图中以特定顺序描述了本申请方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。相反，流程图中描绘的步骤可以改变执行顺序。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

申请文件中提及的动词“包括”、“包含”及其词形变化的使用不排除除了申请文件中记载的那些元素或步骤之外的元素或步骤的存在。元素前的冠词“一”或“一个”不排除多个这种元素的存在。

虽然已经参考若干具体实施方式描述了本申请的精神和原理，但是应该理解，本申请并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本申请旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。所附权利要求的范围符合最宽泛的解释，从而包含所有这样的修改及等同结构和功能。

Claims (10)

1.一种图像渲染方法，其特征在于，包括：

获取图像渲染参数以及设备显示参数，所述图像渲染参数包括图像渲染数据以及图像渲染配置；

基于渲染入口组件，根据所述图像渲染参数以及所述设备显示参数确定图像渲染规则；所述渲染入口组件为待渲染的第一画布图层以及第二画布图层所需的渲染功能的调用入口；

若所述图像渲染规则与图像设定规则相匹配，则将所述第一画布图层重叠于所述第二画布图层之上；

根据所述图像渲染规则对所述第一画布图层进行动态功能渲染，以及根据所述图像渲染规则对所述第二画布图层进行静态功能渲染，得到目标渲染图像。

2.根据权利要求1所述的图像渲染方法，其特征在于，

所述根据所述图像渲染规则对所述第一画布图层进行动态功能渲染，以及根据所述图像渲染规则对所述第二画布图层进行静态功能渲染之前，包括：

根据所述设备显示参数初始化显示配置，所述设备显示参数包括设备显示尺寸、设备显示比例以及显示像素比；

根据所述图像渲染规则确定画布缩放比例，所述图像渲染规则包括图像网格尺寸以及图像网格线路数量；

根据所述显示配置以及所述画布缩放比例构建所述第一画布图层以及所述第二画布图层。

3.根据权利要求2所述的图像渲染方法，其特征在于，

所述根据所述图像渲染规则对所述第一画布图层进行动态功能渲染，以及根据所述图像渲染规则对所述第二画布图层进行静态功能渲染之前，还包括：

获取画像动态资源，所述画像动态资源包括元素添加动态以及元素消失动态；

基于所述图像渲染配置以及所述画像动态资源初始化设备缓存信息，所述图像渲染配置包括图像背景主题以及元素样式信息。

4.根据权利要求3所述的图像渲染方法，其特征在于，

所述根据所述图像渲染规则对所述第一画布图层进行动态功能渲染，包括：

清空所述第一画布图层；

对所述第一画布图层的字体信息以及起始点坐标进行初始化；

监测元素变动事件，所述元素变动事件包括元素添加事件、添加确认事件以及元素消失事件；

若监测到所述元素添加事件，则执行选中渲染策略；以及

执行所述元素添加动态；

若监测到所述元素消失事件，则执行所述元素消失动态。

5.根据权利要求4所述的图像渲染方法，其特征在于，

所述执行所述元素消失动态，包括：

基于所述图像网格尺寸、所述画布缩放比例以及所述设备缓存信息确定消失元素坐标集合；

获取每一元素消失位置对应的元素消失动态；

在所述消失元素坐标集合中的每一元素消失位置坐标上绘制每一元素消失位置对应的元素消失动态；

每一元素消失位置分别执行对应的元素消失动态，直至所有元素消失位置均执行完毕。

6.根据权利要求3所述的图像渲染方法，其特征在于，

所述根据所述图像渲染规则对所述第二画布图层进行静态功能渲染，包括：

清空所述第二画布图层；

基于所述图像背景主题在所述第二画布图层上绘制图像背景以及图像边框；

对所述第二画布图层的字体信息以及起始点坐标进行初始化；

绘制图像网格线路以及线路坐标数值；

绘制图像定位点；以及

渲染元素样式、图像标记和元素添加序号。

7.根据权利要求6所述的图像渲染方法，其特征在于，

所述渲染元素样式、图像标记和元素添加序号，包括：

根据所述图像网格线路数量生成所有可添加元素位置对应的二维坐标数组；

判断所述二维坐标数组中的当前坐标项对应的可添加元素位置上是否存在元素；

若存在所述元素，则基于所述元素样式信息在当前坐标项对应的可添加元素位置绘制所述元素样式以及所述元素添加序号；并且判断当前坐标项对应的可添加元素位置是否存在所述图像标记，若存在，则在当前坐标项对应的可添加元素位置上渲染所述图像标记；

若不存在所述元素，则跳过当前坐标项；

直至所述二维坐标数组中的所有坐标项判断完成。

8.一种图像渲染装置，其特征在于，用于执行如权利要求1-7中任一项所述的图像渲染方法，包括：

获取模块，用于获取图像渲染参数以及设备显示参数，所述图像渲染参数包括图像渲染数据以及图像渲染配置；

规则确定模块，用于基于渲染入口组件，根据所述图像渲染参数以及所述设备显示参数确定图像渲染规则；所述渲染入口组件为待渲染的第一画布图层以及第二画布图层所需的渲染功能的调用入口；

图层重叠模块，若所述图像渲染规则与图像设定规则相匹配，则用于将所述第一画布图层重叠于所述第二画布图层之上；

功能渲染模块，用于根据所述图像渲染规则对所述第一画布图层进行动态功能渲染，以及根据所述图像渲染规则对所述第二画布图层进行静态功能渲染，得到目标渲染图像。

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

处理器；以及

存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1-7中任一项所述的方法。

10.一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如权利要求1-7中任一项所述的方法。

Images