CN106775600A - HTML5 canvas画布的处理方法及装置 - Google Patents

HTML5 canvas画布的处理方法及装置 Download PDF

Info

Publication number
CN106775600A
CN106775600A CN201510808539.4A CN201510808539A CN106775600A CN 106775600 A CN106775600 A CN 106775600A CN 201510808539 A CN201510808539 A CN 201510808539A CN 106775600 A CN106775600 A CN 106775600A
Authority
CN
China
Prior art keywords
canvas
painting canvas
targets
coordinates
painting
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201510808539.4A
Other languages
English (en)
Inventor
周建涛
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Gridsum Technology Co Ltd
Original Assignee
Beijing Gridsum Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Gridsum Technology Co Ltd filed Critical Beijing Gridsum Technology Co Ltd
Priority to CN201510808539.4A priority Critical patent/CN106775600A/zh
Publication of CN106775600A publication Critical patent/CN106775600A/zh
Pending legal-status Critical Current

Links

Landscapes

  • Processing Or Creating Images (AREA)

Abstract

本申请公开了一种HTML5canvas画布的处理方法及装置。该方法包括:在第一canvas画布上确定目标坐标;根据目标坐标确定像素点数据集合,其中,像素点数据集合为目标坐标在第一canvas画布上对应的正方形区域内所有像素点数据的集合;将像素点数据集合中每个像素点数据绘制至第二canvas画布;对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形;以及在第一canvas画布上显示目标图形。通过本申请,解决了相关技术中由于在canvas画布上无法查看区域范围内的相关数据,导致用户体验度较低的问题。

Description

HTML5 canvas画布的处理方法及装置
技术领域
本申请涉及互联网领域,具体而言,涉及一种HTML5 canvas画布的处理方法及装置。
背景技术
目前,常见的图表库通常是基于HTML5Canvas进行绘制,在图表有限空间内展示大量的数据往往是实际项目需要。在有限空间内展示大量数据时,图表的部分区域在界面上往往显得不够清晰。例如气泡图,当数据量大时,气泡会大量重叠。再如折线图,展示多个折线时,也会出现数据重复,用户看不清楚数据。对于看不清楚或者重叠的部分数据,相关技术中通过鼠标移动到图表的某个点,显示某个点的明细信息,可以很详细的展示出该点的不清楚或者显示重叠的数据,由于图表展示内容在哪个部分不清晰或者重叠是随机的,如果针对每个点都进行鼠标移动事件,用户将鼠标移动到该点时,显示的是该点上的数据,如果需要查看多个点的数据,需要逐一移动鼠标移动到各个点,进行逐一查看各个点的数据,操作较为繁琐,并且用户也无法判断这个点上的数据是否是有用数据,也不知道是否需要进一步显示。即某个区域上的数据看不清楚或者重叠显示时,用户无法直观的查看该区域中包含的相关数据,导致用户体验度较低。
针对相关技术中由于在canvas画布上无法查看区域范围内的相关数据,导致用户体验度较低的问题,目前尚未提出有效的解决方案。
发明内容
本申请的主要目的在于提供一种HTML5 canvas画布的处理方法及装置,以解决相关技术中由于在canvas画布上无法查看区域范围内的相关数据,导致用户体验度较低的问题。
为了实现上述目的,根据本申请的一个方面,提供了一种HTML5 canvas画布的处理方法。该方法包括:在第一canvas画布上确定目标坐标;根据目标坐标确定像素点数据集合,其中,像素点数据集合为目标坐标在第一canvas画布上对应的正方形区域内所有像素点数据的集合;将像素点数据集合中每个像素点数据绘制至第二canvas画布;对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形;以及在第一canvas画布上显示目标图形。
进一步地,在第一canvas画布上确定目标坐标包括:在第一canvas画布上检测鼠标移动事件;如果在第一canvas画布上检测到鼠标移动事件,获取鼠标在页面上的坐标;获取第一canvas画布在页面上的定位坐标;以及根据鼠标在页面上的坐标和定位坐标确定目标坐标。
进一步地,根据目标坐标确定像素点数据集合包括:在第一canvas画布上以目标坐标为圆心,预设值为半径确定目标坐标对应的圆形区域;在第一canvas画布上确定圆形区域对应的正方形区域;以及获取正方形区域内所有像素点数据的集合,得到像素点数据集合。
进一步地,对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形包括:对绘制有像素点数据的第二canvas画布进行裁剪,得到圆形canvas画布,其中,圆形canvas画布的半径为预设值;利用预设接口对圆形canvas画布按照预设比例进行放大处理,得到圆形图形,在第一canvas画布上显示目标图形包括:在第一canvas画布上鼠标的右侧显示圆形图形。
进一步地,将像素点数据集合中每个像素点数据绘制至第二canvas画布包括:创建第二canvas画布;以及利用预设绘制接口将像素点数据集合中每个像素点数据绘制至第二canvas画布。
为了实现上述目的,根据本申请的另一方面,提供了一种HTML5 canvas画布的处理装置。该装置包括:第一确定单元,用于在第一canvas画布上确定目标坐标;第二确定单元,用于根据目标坐标确定像素点数据集合,其中,像素点数据集合为目标坐标在第一canvas画布上对应的正方形区域内所有像素点数据的集合;绘制单元,用于将像素点数据集合中每个像素点数据绘制至第二canvas画布;处理单元,用于对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形;以及显示单元,用于在第一canvas画布上显示目标图形。
进一步地,第一确定单元包括:检测模块,用于在第一canvas画布上检测鼠标移动事件;第一获取模块,用于在第一canvas画布上检测到鼠标移动事件的情况下,获取鼠标在页面上的坐标;第二获取模块,用于获取第一canvas画布在页面上的定位坐标;以及第一确定模块,用于根据鼠标在页面上的坐标和定位坐标确定目标坐标。
进一步地,第二确定单元包括:第二确定模块,用于在第一canvas画布上以目标坐标为圆心,预设值为半径确定目标坐标对应的圆形区域;第三确定模块,用于在第一canvas画布上确定圆形区域对应的正方形区域;以及第三获取模块,用于获取正方形区域内所有像素点数据的集合,得到像素点数据集合。
进一步地,处理单元包括:对绘制有像素点数据的第二canvas画布进行裁剪,得到圆形canvas画布,其中,圆形canvas画布的半径为预设值;利用预设接口对圆形canvas画布按照预设比例进行放大处理,得到圆形图形,显示单元包括:在第一canvas画布上鼠标的右侧显示圆形图形。
进一步地,绘制单元包括:创建模块,用于创建第二canvas画布;以及绘制模块,用于利用预设绘制接口将像素点数据集合中每个像素点数据绘制至第二canvas画布。
通过本申请,采用以下步骤:在第一canvas画布上确定目标坐标;根据目标坐标确定像素点数据集合,其中,像素点数据集合为目标坐标在第一canvas画布上对应的正方形区域内所有像素点数据的集合;将像素点数据集合中每个像素点数据绘制至第二canvas画布;对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形;以及在第一canvas画布上显示目标图形,解决了相关技术中相关技术中由于在canvas画布上无法查看区域范围内的相关数据,导致用户体验度较低的问题。通过获取鼠标在canvas画布上的目标坐标,然后获取周围区域的像素数据,将之复制到另外的canvas画布,做放大处理,从而达到放大显示鼠标移动区域的图形的目的,进而达到了提升用户体验度的效果。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1是根据本申请实施例的HTML5 canvas画布的处理方法的流程图;以及
图2是根据本申请实施例的HTML5 canvas画布的处理装置的示意图。
具体实施方式
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
为了使本技术领域的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。
需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
根据本申请的实施例,提供了一种HTML5 canvas画布的处理方法。
图1是根据本申请实施例的HTML5 canvas画布的处理方法的流程图。如图1所示,该方法包括以下步骤:
步骤S101,在第一canvas画布上确定目标坐标。
在本申请中的目标坐标是指鼠标移动到第一canvas画布上的某个点时,该点相对于页面的坐标。
可选地,在本申请实施例提供的HTML5 canvas画布的处理方法中,在第一canvas画布上确定目标坐标包括:在第一canvas画布上检测鼠标移动事件;如果在第一canvas画布上检测到鼠标移动事件,获取鼠标在页面上的坐标;获取第一canvas画布在页面上的定位坐标;以及根据鼠标在页面上的坐标和定位坐标确定目标坐标。
具体地,上述的鼠标移动事件即是当鼠标移动到canvas画布的某个点时的事件,获取鼠标在页面上的坐标;获取canvas画布在页面上的定位坐标;以及根据鼠标在页面上的坐标和定位坐标确定目标坐标,即获取此点在canvas画布的坐标。
例如,Canvas画布在页面上的定位坐标值为(100px,10px),即Canvas画布距离页面左边距离为100px,Canvas画布距离页面顶部距离为10px。鼠标移动到canvas画布的某个点的坐标值为(120px,20px),即鼠标光标距离canvas画布的左侧距离为120-100=20px;距离canvas画布上侧的距离为20-10=10px;即计算出目标坐标为(20px,10px)。
步骤S102,根据目标坐标确定像素点数据集合,其中,像素点数据集合为目标坐标在第一canvas画布上对应的正方形区域内所有像素点数据的集合。
可选地,在本申请实施例提供的HTML5 canvas画布的处理方法中,根据目标坐标确定像素点数据集合包括:在第一canvas画布上以目标坐标为圆心,预设值为半径确定目标坐标对应的圆形区域;在第一canvas画布上确定圆形区域对应的正方形区域;以及获取正方形区域内所有像素点数据的集合,得到像素点数据集合。
为了在配置文件中配置需要放大的区域范围的大小,在本申请中使用放大区域为以鼠标当前位置(目标坐标点)为圆心,以r(预设值)为半径的圆形区域。在canvas画布中获取正方形区域的每个像素点的数据,正方形区域中心点为圆心,边长为2r,将获取到的像素点数据存储至变量A中。根据获取到canvas画布上正方形区域内所有像素点数据,组成像素点数据集合。
步骤S103,将像素点数据集合中每个像素点数据绘制至第二canvas画布。
可选地,在本申请实施例提供的HTML5 canvas画布的处理方法中,将像素点数据集合中每个像素点数据绘制至第二canvas画布包括:创建第二canvas画布;以及利用预设绘制接口将像素点数据集合中每个像素点数据绘制至第二canvas画布。
具体地,利用画布创建模块创建一个新的canvas画布(第二canvas画布),将上述变量A中存储的像素点数据集合绘制到第二canvas画布中,第二canvas画布的高度和宽度均为2r。将像素点数据绘制到第二canvas画布上。
步骤S104,对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形。
可选地,在本申请实施例提供的HTML5 canvas画布的处理方法中,对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形包括:对绘制有像素点数据的第二canvas画布进行裁剪,得到圆形canvas画布,其中,圆形canvas画布的半径为预设值;利用预设接口对圆形canvas画布按照预设比例进行放大处理,得到圆形图形。
具体地,在上述的新的canvas画布(第二canvas画布)中,裁剪一个内切圆,将圆外的其它像素点删除,此内切圆以r为半径,以新的canvas画布中心点为圆心。将第二canvas画布宽度和高度同比例缩放,再调用canvas提供的接口放大需要显示的图形,对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形。
步骤S105,在第一canvas画布上显示目标图形。
在第一canvas画布上显示目标图形包括:在第一canvas画布上鼠标的右侧显示上述得到的目标图形。
本申请实施例提供的HTML5 canvas画布的处理方法,通过在第一canvas画布上确定目标坐标;根据目标坐标确定像素点数据集合,其中,像素点数据集合为目标坐标在第一canvas画布上对应的正方形区域内所有像素点数据的集合;将像素点数据集合中每个像素点数据绘制至第二canvas画布;对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形;以及在第一canvas画布上显示目标图形,解决了相关技术中相关技术中由于在canvas画布上无法查看区域范围内的相关数据,导致用户体验度较低的问题。通过获取鼠标在canvas画布上的目标坐标,然后获取周围区域的像素数据,将之复制到另外的canvas画布,做放大处理,从而达到放大显示鼠标移动区域的图形的目的,进而达到了提升用户体验度的效果。
需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
本申请实施例还提供了一种HTML5 canvas画布的处理装置,需要说明的是,本申请实施例的HTML5 canvas画布的处理装置可以用于执行本申请实施例所提供的用于HTML5 canvas画布的处理方法。以下对本申请实施例提供的HTML5 canvas画布的处理装置进行介绍。
图2是根据本申请实施例的HTML5 canvas画布的处理装置的示意图。如图2所示,该装置包括:第一确定单元10、第二确定单元20、绘制单元30、处理单元40和显示单元50。
第一确定单元10,用于在第一canvas画布上确定目标坐标。
第二确定单元20,用于根据目标坐标确定像素点数据集合,其中,像素点数据集合为目标坐标在第一canvas画布上对应的正方形区域内所有像素点数据的集合。
绘制单元30,用于将像素点数据集合中每个像素点数据绘制至第二canvas画布。
处理单元40,用于对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形。
显示单元50,用于在第一canvas画布上显示目标图形。
本申请实施例提供的HTML5 canvas画布的处理装置,通过第一确定单元10在第一canvas画布上确定目标坐标;第二确定单元20根据目标坐标确定像素点数据集合,其中,像素点数据集合为目标坐标在第一canvas画布上对应的正方形区域内所有像素点数据的集合;绘制单元30将像素点数据集合中每个像素点数据绘制至第二canvas画布;处理单元40对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形;以及显示单元50在第一canvas画布上显示目标图形,解决了相关技术中相关技术中由于在canvas画布上无法查看区域范围内的相关数据,导致用户体验度较低的问题,通过获取鼠标在canvas画布上的目标坐标,然后获取周围区域的像素数据,将之复制到另外的canvas画布,做放大处理,从而达到放大显示鼠标移动区域的图形的目的,进而达到了提升用户体验度的效果。
可选地,在本申请实施例提供的HTML5 canvas画布的处理装置中,第一确定单元10包括:检测模块,用于在第一canvas画布上检测鼠标移动事件;第一获取模块,用于在第一canvas画布上检测到鼠标移动事件的情况下,获取鼠标在页面上的坐标;第二获取模块,用于获取第一canvas画布在页面上的定位坐标;以及第一确定模块,用于根据鼠标在页面上的坐标和定位坐标确定目标坐标。
可选地,在本申请实施例提供的HTML5 canvas画布的处理装置中,第二确定单元20包括:第二确定模块,用于在第一canvas画布上以目标坐标为圆心,预设值为半径确定目标坐标对应的圆形区域;第三确定模块,用于在第一canvas画布上确定圆形区域对应的正方形区域;以及第三获取模块,用于获取正方形区域内所有像素点数据的集合,得到像素点数据集合。
可选地,在本申请实施例提供的HTML5 canvas画布的处理装置中,处理单元40包括:对绘制有像素点数据的第二canvas画布进行裁剪,得到圆形canvas画布,其中,圆形canvas画布的半径为预设值;利用预设接口对圆形canvas画布按照预设比例进行放大处理,得到圆形图形,显示单元50包括:在第一canvas画布上鼠标的右侧显示圆形图形。
可选地,在本申请实施例提供的HTML5 canvas画布的处理装置中,绘制单元30包括:创建模块,用于创建第二canvas画布;以及绘制模块,用于利用预设绘制接口将像素点数据集合中每个像素点数据绘制至第二canvas画布。
所述HTML5 canvas画布的处理装置包括处理器和存储器,上述第一确定单元、第二确定单元、绘制单元、处理单元和显示单元等均作为程序单元存储在存储器中,由处理器执行存储在存储器中的上述程序单元实现相应功能。
处理器中包含内核,由内核去存储器中调取相应的程序单元。内核可以设置一个或以上,通过调整内核参数处理HTML5 canvas画布。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM),存储器包括至少一个存储芯片。
本申请还提供了一种计算机程序产品的实施例,当在数据处理设备上执行时,适于执行初始化有如下方法步骤的程序代码:在第一canvas画布上确定目标坐标;根据目标坐标确定像素点数据集合,其中,像素点数据集合为目标坐标在第一canvas画布上对应的正方形区域内所有像素点数据的集合;将像素点数据集合中每个像素点数据绘制至第二canvas画布;对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形;以及在第一canvas画布上显示目标图形。
需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本申请并不受所描述的动作顺序的限制,因为依据本申请,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本申请所必须的。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置,可通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
显然,本领域的技术人员应该明白,上述的本申请的各模块或各步骤可以用通用的计算装置来实现,它们可以集中在单个的计算装置上,或者分布在多个计算装置所组成的网络上,可选地,它们可以用计算装置可执行的程序代码来实现,从而,可以将它们存储在存储装置中由计算装置来执行,或者将它们分别制作成各个集成电路模块,或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样,本申请不限制于任何特定的硬件和软件结合。
以上所述仅为本申请的优选实施例,并不用于限制本申请,对于本领域的技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。

Claims (10)

1.一种HTML5 canvas画布的处理方法,其特征在于,包括:
在第一canvas画布上确定目标坐标;
根据所述目标坐标确定像素点数据集合,其中,所述像素点数据集合为所述目标坐标在所述第一canvas画布上对应的正方形区域内所有像素点数据的集合;
将所述像素点数据集合中每个像素点数据绘制至第二canvas画布;
对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形;以及
在所述第一canvas画布上显示所述目标图形。
2.根据权利要求1所述的方法,其特征在于,在第一canvas画布上确定目标坐标包括:
在所述第一canvas画布上检测鼠标移动事件;
如果在所述第一canvas画布上检测到所述鼠标移动事件,获取鼠标在页面上的坐标;
获取所述第一canvas画布在所述页面上的定位坐标;以及
根据所述鼠标在页面上的坐标和所述定位坐标确定所述目标坐标。
3.根据权利要求1所述的方法,其特征在于,根据所述目标坐标确定像素点数据集合包括:
在所述第一canvas画布上以所述目标坐标为圆心,预设值为半径确定所述目标坐标对应的圆形区域;
在所述第一canvas画布上确定所述圆形区域对应的正方形区域;以及
获取所述正方形区域内所有像素点数据的集合,得到所述像素点数据集合。
4.根据权利要求3所述的方法,其特征在于,
对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形包括:对绘制有像素点数据的第二canvas画布进行裁剪,得到圆形canvas画布,其中,所述圆形canvas画布的半径为所述预设值;利用预设接口对所述圆形canvas画布按照预设比例进行放大处理,得到圆形图形,
在所述第一canvas画布上显示所述目标图形包括:在所述第一canvas画布上鼠标的右侧显示所述圆形图形。
5.根据权利要求1所述的方法,其特征在于,将所述像素点数据集合中每个像素点数据绘制至第二canvas画布包括:
创建所述第二canvas画布;以及
利用预设绘制接口将所述像素点数据集合中每个像素点数据绘制至所述第二canvas画布。
6.一种HTML5canvas画布的处理装置,其特征在于,包括:
第一确定单元,用于在第一canvas画布上确定目标坐标;
第二确定单元,用于根据所述目标坐标确定像素点数据集合,其中,所述像素点数据集合为所述目标坐标在所述第一canvas画布上对应的正方形区域内所有像素点数据的集合;
绘制单元,用于将所述像素点数据集合中每个像素点数据绘制至第二canvas画布;
处理单元,用于对绘制有像素点数据的第二canvas画布按照预设比例进行放大处理,得到目标图形;以及
显示单元,用于在所述第一canvas画布上显示所述目标图形。
7.根据权利要求6所述的装置,其特征在于,所述第一确定单元包括:
检测模块,用于在所述第一canvas画布上检测鼠标移动事件;
第一获取模块,用于在所述第一canvas画布上检测到所述鼠标移动事件的情况下,获取鼠标在页面上的坐标;
第二获取模块,用于获取所述第一canvas画布在所述页面上的定位坐标;以及
第一确定模块,用于根据所述鼠标在页面上的坐标和所述定位坐标确定所述目标坐标。
8.根据权利要求6所述的装置,其特征在于,所述第二确定单元包括:
第二确定模块,用于在所述第一canvas画布上以所述目标坐标为圆心,预设值为半径确定所述目标坐标对应的圆形区域;
第三确定模块,用于在所述第一canvas画布上确定所述圆形区域对应的正方形区域;以及
第三获取模块,用于获取所述正方形区域内所有像素点数据的集合,得到所述像素点数据集合。
9.根据权利要求8所述的装置,其特征在于,
所述处理单元包括:对绘制有像素点数据的第二canvas画布进行裁剪,得到圆形canvas画布,其中,所述圆形canvas画布的半径为所述预设值;利用预设接口对所述圆形canvas画布按照预设比例进行放大处理,得到圆形图形,
所述显示单元包括:在所述第一canvas画布上鼠标的右侧显示所述圆形图形。
10.根据权利要求6所述的装置,其特征在于,所述绘制单元包括:
创建模块,用于创建所述第二canvas画布;以及
绘制模块,用于利用预设绘制接口将所述像素点数据集合中每个像素点数据绘制至所述第二canvas画布。
CN201510808539.4A 2015-11-19 2015-11-19 HTML5 canvas画布的处理方法及装置 Pending CN106775600A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510808539.4A CN106775600A (zh) 2015-11-19 2015-11-19 HTML5 canvas画布的处理方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510808539.4A CN106775600A (zh) 2015-11-19 2015-11-19 HTML5 canvas画布的处理方法及装置

Publications (1)

Publication Number Publication Date
CN106775600A true CN106775600A (zh) 2017-05-31

Family

ID=58885664

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510808539.4A Pending CN106775600A (zh) 2015-11-19 2015-11-19 HTML5 canvas画布的处理方法及装置

Country Status (1)

Country Link
CN (1) CN106775600A (zh)

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108280135A (zh) * 2017-12-26 2018-07-13 阿里巴巴集团控股有限公司 实现数据结构可视化的方法、装置和电子设备
CN109299412A (zh) * 2018-08-24 2019-02-01 四川爱创科技有限公司 应用于web端的图片预处理方法
CN109522532A (zh) * 2017-09-19 2019-03-26 北京国双科技有限公司 一种折线图框选范围的计算方法及装置
CN109558572A (zh) * 2017-09-27 2019-04-02 北京国双科技有限公司 图表调整方法及装置
CN110489119A (zh) * 2019-06-26 2019-11-22 中电万维信息技术有限责任公司 基于图数据库显示查询结果的方法、装置及存储介质
CN111292037A (zh) * 2020-01-19 2020-06-16 上海智勘科技有限公司 在仓储管理中通过视频划线分区的方法和系统
CN111767490A (zh) * 2020-06-30 2020-10-13 北京百度网讯科技有限公司 用于展示图像的方法、装置、设备以及存储介质
CN112527169A (zh) * 2020-12-30 2021-03-19 江苏龙虎网信息科技股份有限公司 一种智能手机屏幕识别手绘圆形的方法
CN113393554A (zh) * 2021-06-25 2021-09-14 京东方科技集团股份有限公司 地图生成方法和地图生成装置
CN113628295A (zh) * 2021-08-02 2021-11-09 浪潮软件股份有限公司 一种绘制海报的方法
CN113947650A (zh) * 2021-09-30 2022-01-18 完美世界(北京)软件科技发展有限公司 动画处理方法、装置、电子设备及介质
CN115423684A (zh) * 2022-08-23 2022-12-02 成都智元汇信息技术股份有限公司 用rgb数组对列包裹图片局部放大的方法及装置和显示器
CN117557682A (zh) * 2024-01-09 2024-02-13 腾讯科技(深圳)有限公司 数据处理方法、装置、产品、设备和介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2006115044A (ja) * 2004-10-13 2006-04-27 Sony Corp 撮像装置、レイアウト編集方法およびプログラム
CN101140579A (zh) * 2007-10-12 2008-03-12 唐丽霞 互联网上带放大镜窗口的双窗口电子地图服务系统和方法
CN102012924A (zh) * 2010-11-29 2011-04-13 深圳市融创天下科技发展有限公司 一种地图显示的方法、系统和移动终端
CN105045604A (zh) * 2015-08-25 2015-11-11 广州视睿电子科技有限公司 绘制图形的方法和系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2006115044A (ja) * 2004-10-13 2006-04-27 Sony Corp 撮像装置、レイアウト編集方法およびプログラム
CN101140579A (zh) * 2007-10-12 2008-03-12 唐丽霞 互联网上带放大镜窗口的双窗口电子地图服务系统和方法
CN102012924A (zh) * 2010-11-29 2011-04-13 深圳市融创天下科技发展有限公司 一种地图显示的方法、系统和移动终端
CN105045604A (zh) * 2015-08-25 2015-11-11 广州视睿电子科技有限公司 绘制图形的方法和系统

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
李恒武主编: "《Web程序设计》", 31 January 2014, 吉林大学出版社 *
王翠萍编著: "《移动Web开发从入门到精通 基于HTML 5+jQuery Mobile+PhoneGap》", 31 March 2015, 中国铁道出版社 *
编著;董德存主审: "《交通信息技术 第2版》", 31 March 2014, 同济大学出版社 *
耿卫东,陈凯,李鑫等著: "《三维游戏引擎设计与实现》", 31 October 2008, 浙江大学出版社 *
赵勤,郑富平编: "《中文版PHOTOSHOP CS3图形图像设计》", 31 August 2011, 华中师范大学出版社 *

Cited By (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109522532A (zh) * 2017-09-19 2019-03-26 北京国双科技有限公司 一种折线图框选范围的计算方法及装置
CN109522532B (zh) * 2017-09-19 2022-11-04 北京国双科技有限公司 一种折线图框选范围的计算方法及装置
CN109558572A (zh) * 2017-09-27 2019-04-02 北京国双科技有限公司 图表调整方法及装置
CN109558572B (zh) * 2017-09-27 2022-11-22 北京国双科技有限公司 图表调整方法及装置
CN108280135B (zh) * 2017-12-26 2021-08-10 创新先进技术有限公司 实现数据结构可视化的方法、装置和电子设备
CN108280135A (zh) * 2017-12-26 2018-07-13 阿里巴巴集团控股有限公司 实现数据结构可视化的方法、装置和电子设备
CN109299412A (zh) * 2018-08-24 2019-02-01 四川爱创科技有限公司 应用于web端的图片预处理方法
CN110489119A (zh) * 2019-06-26 2019-11-22 中电万维信息技术有限责任公司 基于图数据库显示查询结果的方法、装置及存储介质
CN110489119B (zh) * 2019-06-26 2022-04-12 中电万维信息技术有限责任公司 基于图数据库显示查询结果的方法、装置及存储介质
CN111292037A (zh) * 2020-01-19 2020-06-16 上海智勘科技有限公司 在仓储管理中通过视频划线分区的方法和系统
CN111767490A (zh) * 2020-06-30 2020-10-13 北京百度网讯科技有限公司 用于展示图像的方法、装置、设备以及存储介质
CN111767490B (zh) * 2020-06-30 2024-04-23 北京百度网讯科技有限公司 用于展示图像的方法、装置、设备以及存储介质
CN112527169A (zh) * 2020-12-30 2021-03-19 江苏龙虎网信息科技股份有限公司 一种智能手机屏幕识别手绘圆形的方法
CN113393554A (zh) * 2021-06-25 2021-09-14 京东方科技集团股份有限公司 地图生成方法和地图生成装置
CN113628295A (zh) * 2021-08-02 2021-11-09 浪潮软件股份有限公司 一种绘制海报的方法
CN113947650A (zh) * 2021-09-30 2022-01-18 完美世界(北京)软件科技发展有限公司 动画处理方法、装置、电子设备及介质
CN115423684A (zh) * 2022-08-23 2022-12-02 成都智元汇信息技术股份有限公司 用rgb数组对列包裹图片局部放大的方法及装置和显示器
CN117557682A (zh) * 2024-01-09 2024-02-13 腾讯科技(深圳)有限公司 数据处理方法、装置、产品、设备和介质
CN117557682B (zh) * 2024-01-09 2024-04-19 腾讯科技(深圳)有限公司 数据处理方法、装置、产品、设备和介质

Similar Documents

Publication Publication Date Title
CN106775600A (zh) HTML5 canvas画布的处理方法及装置
CN104142783B (zh) 自适应贴片框架
JP6768695B2 (ja) 合成された絵を生成するための方法及び装置
JP6015656B2 (ja) 情報処理装置、情報処理システム、サーバ、情報処理方法、および、コンピュータ・プログラム
CN100478881C (zh) 一种用户操作区域反遮挡的装置和方法
CN106610926A (zh) Echarts图表的数据显示方法及装置
US20140320418A1 (en) Pattern Swapping Method and Multi-touch Device thereof
CN107329653A (zh) 调整图标大小的方法及装置
CN106610829A (zh) 网页截图方法和装置
KR20190125456A (ko) 게임 씬 내의 목표 대상을 고정시키기 위한 방법과 장치, 전자 장치, 및 저장 매체
CN104809751B (zh) 生成事件组演化图的方法和装置
CN106843700A (zh) 截图方法及装置
CN103902580A (zh) 一种实现网页内多元素拖动的方法和装置
CN106371712B (zh) 不规则截图方法及装置
CN106249864B (zh) 交互方法、交互装置及用户设备
CN103577047B (zh) 用于数据网格控件的水平滚动条的显示处理方法和装置
CN104407876B (zh) 显示标注控件的方法及装置
CN104978752A (zh) 用于芯片缺陷扫描的关注区域划分方法
CN106249863B (zh) 交互方法、交互装置及用户设备
JP2015203989A (ja) 表示制御プログラム、表示制御装置及び表示制御方法
CN108156504B (zh) 一种视频显示方法及装置
CN116168034A (zh) 编织物的缺陷检测方法、装置、设备及存储介质
CN112947805A (zh) 一种图标排序方法及装置
CN104809430B (zh) 一种手掌区域识别方法及装置
CN103729844B (zh) 一种静止检测方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information

Address after: 100083 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing

Applicant after: Beijing Guoshuang Technology Co.,Ltd.

Address before: 100086 Cuigong Hotel, 76 Zhichun Road, Shuangyushu District, Haidian District, Beijing

Applicant before: Beijing Guoshuang Technology Co.,Ltd.

CB02 Change of applicant information
RJ01 Rejection of invention patent application after publication

Application publication date: 20170531

RJ01 Rejection of invention patent application after publication