网页绘图调试方法、装置、电子设备及存储介质制造方法及图纸

技术编号:34000132 阅读:17 留言:0更新日期:2022-07-02 11:55
本申请公开了网页绘图调试方法、装置、电子设备及存储介质,所述方法包括响应于目标网页绘图的调试触发指令,展示目标调试页面,目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息,其中,原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的,预设绘制数据映射关系表征绘制指令与绘制节点信息间的映射关系;响应于调试指令,确定调试指令对应的调试信息;基于调试信息更新所述原始绘制节点信息,得到更新绘制节点信息;基于更新绘制节点信息更新所述对应的原始绘制结果信息。利用本申请提供的技术方案能够直观便捷地实现网页绘图调试,提升网页绘图调试的灵活性和效率,节省时间和人力资源。节省时间和人力资源。节省时间和人力资源。

【技术实现步骤摘要】
网页绘图调试方法、装置、电子设备及存储介质


[0001]本申请涉及计算机网络
,具体涉及网页绘图调试方法、装置、电子设备及存储介质。

技术介绍

[0002]随着计算机的发展和互联网技术的不断推进,丰富强大的网页图像或动画能够将网页更好地呈现给用户,方便用户获取信息的同时吸引用户。Canvas(画布)是html5中用于在网页中绘制图像或展现动画的标签,功能强大,能够灵活便利地实现网页中图像的绘制,展现丰富的网页图像效果;不过,<canvas>元素本身并没有绘制能力,必须利用脚本(指令)来完成绘图,在实际应用中,要利用canvas实现网页绘图往往需要依赖大量的canvas代码来实现,且在实现最终展示效果之前,往往需要进行调试以保证达到网页绘图的最佳效果,避免错误。
[0003]现有技术中在进行canvas网页绘图调试时,往往需要开发人员对照相应的canvas代码进行相应的修改再返回网页查看展示效果,需要确定代码与效果的对应关系,繁琐耗时且较易出错,因此,需要提供更加可靠高效的方案。

技术实现思路

[0004]为了解决现有技术的问题,本申请提供了一种网页绘图调试方法、装置、电子设备及存储介质。所述技术方案如下:
[0005]本申请一方面提供了一种网页绘图调试方法,所述方法包括:
[0006]响应于目标网页绘图的调试触发指令,展示目标调试页面,所述目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息;其中,所述原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的,所述预设绘制数据映射关系表征绘制指令与绘制节点信息间的映射关系;
[0007]响应于调试指令,确定所述调试指令对应的调试信息;
[0008]基于所述调试信息更新所述原始绘制节点信息,得到更新绘制节点信息;
[0009]基于所述更新绘制节点信息更新所述对应的原始绘制结果信息;
[0010]其中,所述原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的。
[0011]本申请另一方面提供了一种网页绘图调试装置,所述装置包括:
[0012]目标调试页面展示模块,用于响应于目标网页绘图的调试触发指令,展示目标调试页面,所述目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息;其中,所述原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的,所述预设绘制数据映射关系表征绘制指令与绘制节点信息间的映射关系;
[0013]调试信息确定模块,用于响应于调试指令,确定所述调试指令对应的调试信息;
[0014]绘制节点更新模块,用于基于所述调试信息更新所述原始绘制节点信息,得到更
新绘制节点信息;
[0015]绘制效果更新模块,用于基于所述更新绘制节点信息更新所述对应的原始绘制结果信息。
[0016]本申请另一方面提供了一种电子设备,所述电子设备包括处理器和存储器,所述存储器中存储有至少一条指令或至少一段程序,所述至少一条指令或所述至少一段程序由上述处理器加载并执行以实现如上述的网页绘图调试方法。
[0017]本申请另一方面提供了一种计算机可读存储介质,所述存储介质中存储有至少一条指令或至少一段程序,所述至少一条指令或所述至少一段程序由处理器加载并执行以实现如上述的网页绘图调试方法。
[0018]本申请提供的网页绘图调试方法、装置、电子设备及存储介质,具有如下技术效果:
[0019]本申请通过响应于目标网页绘图的调试触发指令,展示目标调试页面,且目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息,其中,原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的,利用预设绘制数据映射关系对目标原始绘制指令集进行解析并展示,无需对海量繁琐的指令进行对应修改,能够直观清楚地获取调试信息和绘制结果,提升网页绘图调试的灵活性;然后,响应于调试指令,确定调试指令对应的调试信息,再基于调试信息更新原始绘制节点信息,得到更新绘制节点信息;基于所述更新绘制节点信息更新所述对应的原始绘制结果信息,能够实时根据调试指令更新原始绘制结果,从而实现直观便捷的网页绘图调试,提升网页绘图调试的效率和灵活性,且能够减少调试错误的情况。
[0020]本申请的附加方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本申请的实践了解到。
附图说明
[0021]为了更清楚地说明本申请实施例或现有技术中的技术方案和优点,下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其它附图。
[0022]图1是本申请实施例提供的一种应用环境的示意图;
[0023]图2是本申请实施例提供的一种网页绘图调试方法的流程示意图;
[0024]图3是本申请实施例提供的一种目标调试页面的示意图;
[0025]图4是本申请实施例提供的另一种网页绘图调试方法的流程示意图;
[0026]图5是本申请实施例提供的另一种网页绘图调试方法的流程示意图;
[0027]图6是本申请实施例提供的另一种网页绘图调试方法的流程示意图;
[0028]图7是本申请实施例提供的另一种目标调试页面的示意图;
[0029]图8是本申请实施例提供的另一种网页绘图调试方法的流程示意图;
[0030]图9是本申请实施例提供的另一种网页绘图调试方法的流程示意图;
[0031]图10是本申请实施例提供的展示更新后的原始绘制结果信息的页面示意图;
[0032]图11是本申请实施例提供的一种网页绘图调试装置示意图;
[0033]图12是本申请实施例提供的一种用于实现网页绘图调试方法的客户端的硬件结构框图。
具体实施方式
[0034]下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本申请保护的范围。所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。
[0035]需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或服务器不必限于清楚地列出的那些步本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种网页绘图调试方法,其特征在于,所述方法包括:响应于目标网页绘图的调试触发指令,展示目标调试页面,所述目标调试页面包括原始绘制节点信息和对应的原始绘制结果信息;其中,所述原始绘制节点信息是预先基于预设绘制数据映射关系对目标原始绘制指令集进行数据解析生成的,所述预设绘制数据映射关系表征绘制指令与绘制节点信息间的映射关系;响应于调试指令,确定所述调试指令对应的调试信息;基于所述调试信息更新所述原始绘制节点信息,得到更新绘制节点信息;基于所述更新绘制节点信息更新所述对应的原始绘制结果信息。2.根据权利要求1所述的方法,其特征在于,所述方法还包括:获取目标原始绘制指令集;基于所述预设绘制数据映射关系对所述目标原始绘制指令集进行数据解析,得到至少一个绘制节点和对应的节点属性信息;基于所述至少一个绘制节点和对应的节点属性信息生成所述原始绘制节点信息。3.根据权利要求2所述的方法,其特征在于,所述预设绘制数据映射关系包括第一映射信息和第二映射信息,所述基于所述预设绘制数据映射关系对所述目标原始绘制指令集进行数据解析,得到至少一个绘制节点和对应的节点属性信息包括:从所述目标原始绘制指令集中确定目标绘制执行指令;基于所述第一映射信息确定所述目标绘制执行指令对应的绘制节点类型,所述第一映射信息表征绘制执行指令与绘制节点类型的映射关系;基于所述目标绘制执行指令对应的绘制节点类型创建目标绘制节点;从所述目标原始绘制指令集中确定与所述目标绘制执行指令对应的绘制样式指令;基于所述与所述目标绘制执行指令对应的绘制样式指令和所述第二映射信息确定所述目标绘制节点对应的节点属性信息,所述第二映射信息表征绘制样式指令与节点属性信息间的映射关系。4.根据权利要求1所述的方法,其特征在于,所述基于所述调试信息更新所述原始绘制节点信息,得到更新绘制节点信息包括:根据所述调试信息确定所述原始绘制节点信息中的待更新绘制节点;根据所述调试信息对所述待更新绘制节点执行对应的调试操作,生成更新绘制节点信息。5.根据权利要求1所述的方法,其特征...

【专利技术属性】
技术研发人员:陈昱宏
申请(专利权)人:腾讯科技深圳有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1