首页 / 专利库 / 电脑零配件 / 计算机系统 / 硬件 / 外围设备 / 鼠标 / 一种基于HTML5 Canvas的绘图方法

一种基于HTML5 Canvas的绘图方法

阅读：205发布：2020-05-11

专利汇可以提供一种基于HTML5 Canvas的绘图方法专利检索，专利查询，专利分析的服务。并且本 发明 涉及一种基于HTML5Canvas的绘图方法，包括以下步骤：S1、创建原始大小的底层 和尺寸小于底层 的操作层 ；S2、根据预设的偏移数据，将操作层 覆盖 于底层 之上；S3、在操作层 上进行图像绘制，记录图像绘制轨迹；S4、根据图像绘制轨迹，重新在底层 上进行图像绘制，以完成绘图。与 现有技术 相比，本发明基于动态 分辨率 原理，通过构建双层 ，在上层较小的 上监听 鼠标 或触摸事件以保证绘图流畅性；并将上层的绘图轨迹在下层 上重现，以保证图像的清晰度。，下面是一种基于HTML5 Canvas的绘图方法专利的具体信息内容。

1.一种基于HTML5 Canvas的绘图方法，其特征在于，包括以下步骤：
S1、创建底层和操作层，其中，操作层的尺寸小于底层的尺寸；
S2、根据预设的偏移数据，将操作层覆盖于底层之上；
S3、在操作层上进行图像绘制，记录图像绘制轨迹；
S4、根据图像绘制轨迹，重新在底层上进行图像绘制，以完成绘图。
2.根据权利要求1所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S1中底层的尺寸为原始尺寸，所述操作层的尺寸是将底层的尺寸按照预先设置的比例进行缩小后的尺寸。
3.根据权利要求2所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S1中操作层的尺寸具体为：
其中，WO表示操作层的宽度，HO表示操作层的高度，canvasWidth为底层的宽度，canvasHeight为底层的高度，CANVAS_SCALE表示预先设置的比例。
4.根据权利要求1所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S2中预设的偏移数据包括操作层高度方向与底层高度方向之间的距离，以及操作层宽度方向与底层宽度方向之间的距离。
5.根据权利要求4所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S3中图像绘制轨迹包括操作层上鼠标或触摸的位置数据。
6.根据权利要求5所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S3具体包括以下步骤：
S31、在操作层上绑定mousedown或touchstart事件，当mousedown或touchstart事件被触发后，开始记录正在绘制的标志位，并计算鼠标或触摸对应在操作层上的位置，其中，mousedown事件对应为“鼠标按下”，touchstart事件对应为“触摸按下”；
S32、调用context的API——beginPath和moveTo，以在操作层上开始绘制；
S33、对操作层上的mousemove或touchmove事件进行检测，若在操作层上检测到mousemove或touchmove事件，则根据当前绘制的标志位判断是否正在执行绘制操作，若判断为正在执行绘制操作，则记录mousemove或touchmove事件触发时的鼠标或触摸位置，其中，mousemove事件对应为“鼠标移动”，touchmove事件对应为“触摸移动”；
S34、根据mousemove或touchmove事件触发时的鼠标或触摸位置，计算得到操作层上需要进行绘制的坐标位置；
S35、基于操作层上需要进行绘制的坐标位置，在操作层上绘制线条；
S36、对操作层上的mouseup或touchend事件进行检测，若在操作层上检测到mouseup或touchend事件，则记录mouseup或touchend事件触发时的鼠标或触摸位置，其中，mouseup事件对应为“鼠标按键松开”，touchend事件对应为“触摸离开”；
S37、将步骤S31、S33和S36中记录的鼠标或触摸位置数据整理为操作层上的图像绘制轨迹。
7.根据权利要求6所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S34中操作层上需要进行绘制的坐标位置具体为：
其中，xO表示操作层上需要进行绘制的位置的横坐标，yO表示操作层上需要进行绘制的位置的纵坐标，touchX表示mousemove或touchmove事件触发时的鼠标或触摸位置的横坐标，touchY表示mousemove或touchmove事件触发时的鼠标或触摸位置的纵坐标，left表示操作层高度方向与底层高度方向之间的距离，top表示操作层高度方向与底层高度方向之间的距离。
8.根据权利要求7所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S4具体包括以下步骤：
S41、根据操作层上记录的mouseup或touchend事件触发时的鼠标或触摸位置，计算底层的绘制坐标位置；
S42、基于底层的绘制坐标位置以及操作层上的图像绘制轨迹，在底层上完成图像绘制；
S43、清除操作层上记录的所有数据。
9.根据权利要求8所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S41中底层的绘制坐标位置具体为：
其中，xB表示底层的绘制坐标位置的横坐标，yB表示底层的绘制坐标位置的纵坐标，touchX'表示操作层上mouseup或touchend事件触发时的鼠标或触摸位置的横坐标，touchY'表示操作层上mouseup或touchend事件触发时的鼠标或触摸位置的纵坐标。

说明书全文

一种基于HTML5 Canvas的绘图方法

技术领域

[0001] 本发明涉及移动设备绘图技术领域，尤其是涉及一种基于HTML5 Canvas的绘图方法。

背景技术

[0002] HTML5提供了标签，以通过脚本(通常是JavaScript)来绘制图形。它不仅可以用于绘制图表、制作图片，甚至可以制作动画和游戏，目前大部分的浏览器(如桌面和移动版的Chrome、Firefox、Safari等)几乎都对有比较好的支持，这使得众多企业和开发者能以较低的成本实现跨平台的、以图形展示和动画为主的前端应用程序。
[0003] 以手写签名的功能模块为例，该功能模块用途广泛，可以运用在各种场景，比如在理财产品的签约界面上请用户签名确认签约，但是企业或开发者需要保证该功能模块能够兼容iOS、Android、甚至Windows等各类操作系统。
[0004] 传统经常使用的技术手段是基于开发Web APP，同时采用HTML5+WKWebView/UIWebView/WebView/CEF的组合技术方案，以开发跨平台APP。利用实现绘图功能的解决方案大多是利用在上检测鼠标点击、松开事件或手指的触摸、离开事件，从而控制在上调用的绘图API绘制线条。具体的步骤一般包括：
[0005] 一、在鼠标点击、手指触摸时，调用的移动绘制起点API(Application Programming Interface，应用程序接口)；
[0006] 二、在鼠标没有松开或手指没有离开屏幕时，监听鼠标、手指移动事件，每次事件被触发时，调用绘制直线API并重新调用移动绘制起点API，形成绘制连续线条的目的；
[0007] 三、在鼠标松开或手指离开屏幕时，取消对监听鼠标、手指移动事件的触发处理，结束绘制。
[0008] 上述方法在Chrome、Firefox、iOS设备上能够实现较好的绘图功能，能够保证一笔一画均贴合手指和鼠标的移动轨迹。但是，在Android设备上测试时，就可能出现滑动不跟手、线条不平滑等问题。除了设备、操作系统和浏览器的性能差异之外，产生这一问题的主要原因是由于HTML5的绘制表现与本身大小有关，在目前移动设备普遍拥有高DPI(Dots Per Inch，每英寸点数)、高分辨率的情况下，铺满全屏的通常会占据三、四百万个像素，在这样大小的上进行绘图必然会导致响应性能的滞后。
[0009] 为此，现有技术考虑改变绘制区域的大小以提升响应性能，绘制区域的大小是通过本身带有的属性width(宽度)和height(高度)来决定，但是其本身呈现的大小可以通过CSS(Cascading Style Sheets，层叠样式表)的width和height来指定。开发者可以定义一个CANVAS_SCALE属性，通过将CSS中width和height乘以CANVAS_SCALE，从而设置中width和height属性值。例如：将CANVAS_SCALE设置为0.5，那么在的CSS属性中设置width和height分别为3000和2000时，实际绘制区域大小将改变为1500*1000。
[0010] 设置CANVAS_SCALE有非常明显的好处：一是开发者可以根据设备类型和性能动态调整这个值(比如，在PC使用时可以将其设置为1，而在Android移动端使用时设置为0.5)；
[0011] 二是可以直接使用原先用于计算鼠标、手指位置在中对应坐标的代码，仅需要在计算中合适的位置引入对CANVAS_SCALE的乘法逻辑即可；
[0012] 三是对于笔触的粗细也能很容易进行调整，只需将原先的lineWidth乘以CANVAS_SCALE的平方即可。
[0013] 尽管该技术方案能明显提高手绘响应性能，却会使得中呈现的绘制线条变得模糊不清晰，其原因在于实际包含的像素数量被减小到了原来的1/4，也就无法保证绘制图像的清晰度。
[0014] 于是，现有技术还提出了另外一种尽可能减小的大小的方法，具体是将一个切割为多个子的组合，以此既能保证上的图形仍是原先的清晰度，又能减小大小以提升响应性能。然而，该技术方案带来的问题是使得计算鼠标或touch位置在canvas的映射坐标变得相对复杂，并且最终的输出图形需要通过计算和拼接才能最终成型，这无疑增加了程序引入bug的风险。

发明内容

[0015] 本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种基于HTML5Canvas的绘图方法，根据动态分辨率的原理，在提升绘图时的响应性能的同时保证绘图时图像的清晰度。
[0016] 本发明的目的可以通过以下技术方案来实现：一种基于HTML5 Canvas的绘图方法，包括以下步骤：
[0017] S1、创建底层和操作层，其中，操作层的尺寸小于底层的尺寸；
[0018] S2、根据预设的偏移数据，将操作层覆盖于底层之上；
[0019] S3、在操作层上进行图像绘制，记录图像绘制轨迹；
[0020] S4、根据图像绘制轨迹，重新在底层上进行图像绘制，以完成绘图。
[0021] 进一步地，所述步骤S1中底层的尺寸为原始尺寸大小，所述操作层的尺寸是将底层的尺寸按照预先设置的比例进行缩小后的尺寸大小。
[0022] 进一步地，所述步骤S1中操作层的尺寸具体为：
[0023]
[0024] 其中，WO表示操作层的宽度，HO表示操作层的高度，canvasWidth为底层的宽度，canvasHeight为底层的高度，CANVAS_SCALE表示预先设置的比例。
[0025] 进一步地，所述步骤S2中预设的偏移数据包括操作层高度方向与底层高度方向之间的距离，以及操作层宽度方向与底层宽度方向之间的距离。
[0026] 进一步的，所述步骤S3中图像绘制轨迹包括操作层上鼠标或触摸的位置数据。
[0027] 进一步地，所述步骤S3具体包括以下步骤：
[0028] S31、在操作层上绑定mousedown或touchstart事件，当mousedown或touchstart事件被触发后，开始记录正在绘制的标志位，并计算鼠标或触摸对应在操作层上的位置，其中，mousedown事件对应为“鼠标按下”，touchstart事件对应为“触摸按下”；
[0029] S32、调用context的API——beginPath和moveTo，以在操作层上开始绘制；
[0030] S33、对操作层上的mousemove或touchmove事件进行检测，若在操作层上检测到mousemove或touchmove事件，则根据当前绘制的标志位判断是否正在执行绘制操作，若判断为正在执行绘制操作，则记录mousemove或touchmove事件触发时的鼠标或触摸位置，其中，mousemove事件对应为“鼠标移动”，touchmove事件对应为“触摸移动”；
[0031] S34、根据mousemove或touchmove事件触发时的鼠标或触摸位置，计算得到操作层上需要进行绘制的坐标位置；
[0032] S35、基于操作层上需要进行绘制的坐标位置，调用context的API——lineTo和stroke，以在操作层上绘制线条；
[0033] S36、对操作层上的mouseup或touchend事件进行检测，若在操作层上检测到mouseup或touchend事件，则记录mouseup或touchend事件触发时的鼠标或触摸位置，其中，mouseup事件对应为“鼠标按键松开”，touchend事件对应为“触摸离开”；
[0034] S37、将步骤S31、S33和S36中记录的鼠标或触摸位置数据整理为操作层上的图像绘制轨迹。
[0035] 进一步地，所述步骤S34中操作层上需要进行绘制的坐标位置具体为：
[0036]
[0037] 其中，xO表示操作层上需要进行绘制的位置的横坐标，yO表示操作层上需要进行绘制的位置的纵坐标，touchX表示mousemove或touchmove事件触发时的鼠标或触摸位置的横坐标，touchY表示mousemove或touchmove事件触发时的鼠标或触摸位置的纵坐标，left表示操作层高度方向与底层高度方向之间的距离，top表示操作层高度方向与底层高度方向之间的距离。
[0038] 进一步地，所述步骤S4具体包括以下步骤：
[0039] S41、根据操作层上记录的mouseup或touchend事件触发时的鼠标或触摸位置，计算底层的绘制坐标位置；
[0040] S42、基于底层的绘制坐标位置以及操作层上的图像绘制轨迹，在底层上完成图像绘制；
[0041] S43、清除操作层上记录的所有数据。
[0042] 进一步地，所述步骤S41中底层的绘制坐标位置具体为：
[0043]
[0044] 其中，xB表示底层的绘制坐标位置的横坐标，yB表示底层的绘制坐标位置的纵坐标，touchX'表示操作层上mouseup或touchend事件触发时的鼠标或触摸位置的横坐标，touchY'表示操作层上mouseup或touchend事件触发时的鼠标或触摸位置的纵坐标。
[0045] 与现有技术相比，本发明基于动态分辨率的原理，采用上下两层的方式，其中，底层保持原始大小，上层的操作层按照比例缩小，并在操作层上监听鼠标或触摸事件以保证绘图流畅性，同时记录图像绘制轨迹，在操作层绘制结束后，将图像绘图轨迹在底层上进行重现，如此既提升了绘制过程的响应性能、保证了绘制过程的流畅性，同时使得最终绘制的图像具有足够的清晰度。附图说明
[0046] 图1为本发明的方法流程图；
[0047] 图2为实施例中应用效果示意图。

具体实施方式

[0048] 下面结合附图和具体实施例对本发明进行详细说明。
[0049] 如图1所示，一种基于HTML5 Canvas的绘图方法，包括以下步骤：
[0050] S1、创建底层和操作层，其中，操作层的尺寸小于底层的尺寸；
[0051] S2、根据预设的偏移数据，将操作层覆盖于底层之上；
[0052] S3、在操作层上进行图像绘制，记录图像绘制轨迹；
[0053] S4、根据图像绘制轨迹，重新在底层上进行图像绘制，以完成绘图。
[0054] 本发明利用动态分辨率的原理，通过适当降低分辨率，以调高绘图响应性能，同时构建双层：底层及其上层的操作层，保证绘制图像的清晰度。
[0055] 在实际应用中，绘制区域的大小是通过本身带有的属性width(宽度)和height(高度)来决定，而其本身呈现的大小可以通过CSS(即层叠样式表)中的width(宽度)和height(高度)来指定。预先定义一个名为CANVAS_SCALE属性，表示通过底层的缩放比例，将底层CSS中width和height乘以CANVAS_SCALE，即可设置操作层中width和height属性值。如：将CANVAS_SCALE设置为0.5，那么当原始的底层的CSS属性中设置width和height分别为3000和2000时，终端的操作层实际绘制区域大小就为1500*1000。
[0056] 如图2所示的应用效果示意图，本实施例先创建一个原始大小的底层，然后在其上覆盖一个宽度和高度分别为Wo＝canvasWidth*CANVAS_SCALE和Ho＝canvasHeight*CANVAS_SCALE、但其CSS属性中的width和height仍与底层相同的操作层，由此得到两个在外观上大小相同、互相重叠，但上层实际大小要小于下层的操作层。
[0057] 在完成两层的创建后，需要在上层的操作层上实现绘图，具体原理与实现步骤如下：
[0058] 1、在操作层上绑定mousedown(鼠标按下)或touchstart(触摸按下)事件，当mousedown或touchstart事件被触发后，记录正在绘制的标志位，并计算鼠标或触摸位置对应在上的位置，之后调用context的API——beginPath、moveTo，准备开始绘制；
[0059] 2、在操作层上检测到mousemove(鼠标移动)或touchmove(触摸移动)事件后，根据当前绘制的标志位判断是否正在执行绘制操作，如果正在绘制，则记录下事件触发时的鼠标、触摸位置，使用以下计算式计算在上需要绘制的坐标位置：
[0060]
[0061] 式中，xO表示操作层上需要进行绘制的位置的横坐标，yO表示操作层上需要进行绘制的位置的纵坐标，touchX表示mousemove或touchmove事件触发时的鼠标或触摸位置的横坐标，touchY表示mousemove或touchmove事件触发时的鼠标或触摸位置的纵坐标，left表示操作层高度方向与底层高度方向之间的距离，top表示操作层高度方向与底层高度方向之间的距离；
[0062] 计算位置完成后，调用context的API——lineTo、stroke绘制直线；
[0063] 3、在操作层上检测到mouseup(鼠标按键松开)或touchend(触摸离开屏幕)事件后，根据记录下的触发事件时鼠标、触摸触摸位置，在底层上绘制图形，底层计算绘制坐标位置的计算式如下：
[0064]
[0065] 其中，xB表示底层的绘制坐标位置的横坐标，yB表示底层的绘制坐标位置的纵坐标，touchX'表示操作层上mouseup或touchend事件触发时的鼠标或触摸位置的横坐标，touchY'表示操作层上mouseup或touchend事件触发时的鼠标或触摸位置的纵坐标；
[0066] 4、在底层的图像绘制完成后，清除正在绘制的标志位、mousemove(鼠标移动)或touchmove(触摸移动)事件的触发位置记录、以及操作层的所有记录数据。
[0067] 通过上述技术方案，虽然在操作层上鼠标、触摸绘图过程中画出的线会模糊，但能保持绘制过程流畅、跟手；而松开鼠标或手指后，在底层上重新绘制出的图形是与屏幕像素点1:1对应的清晰图像，如此既保证了绘制过程的流畅，又保证最终形成的图形的清晰度。
相关专利内容
标题 发布/更新时间 阅读量
多表单页面的控制方法、装置、可读存储介质及电子设备 2020-05-08 506
一种云桌面广播方法、装置、系统、设备和介质 2020-05-08 213
遥感式无线鼠标 2020-05-11 574
一种基于echarts工具地图下钻的方法 2020-05-08 670
基于实时视频与规则的反馈式区域入侵检测方法与系统 2020-05-08 300
一种受前面帧目标信息约束的相关滤波目标跟踪算法 2020-05-08 925
一种适用于医药产品的交易系统 2020-05-08 471
一种基于胖客户端的云桌面系统及实现该系统的方法 2020-05-08 59
一种刺绣鼠标垫 2020-05-08 1022
基于无线鼠标的手控器系统 2020-05-08 610
高效检索全球专利

专利汇是专利免费检索,专利查询,专利分析-国家发明专利查询检索分析平台，是提供专利分析，专利查询，专利检索等数据服务功能的知识产权数据服务商。

我们的产品包含105个国家的1.26亿组数据，免费查、免费专利分析。

申请试用

分析报告

专利汇分析报告产品可以对行业情报数据进行梳理分析，涉及维度包括行业专利基本状况分析、地域分析、技术分析、发明人分析、申请人分析、专利权人分析、失效分析、核心专利分析、法律分析、研发重点分析、企业专利处境分析、技术处境分析、专利寿命分析、企业定位分析、引证分析等超过60个分析角度，系统通过AI智能系统对图表进行解读，只需1分钟，一键生成行业专利分析报告。

申请试用

鼠标热门专利
热门分类
QQ群二维码
意见反馈
意见反馈
提交反馈
使用该功能遇到问题

该功能需要专业版企业版VIP权限，您可以：

购买VIP 申请VIP试用
您也可以联系官方QQ: 2157717237     电话: 13264338900
关于PatentHub
关于我们 使命宗旨 加入我们 联系我们 帮助中心
PatentHub产品
专利百科 专利交易 业务平台 专利交易大厅 专利需求大厅
 
API接口 数据定制 专利资讯 最新中国发明专利 最新美国发明专利 看视频学检索 技术领域 专利库 专利分类库 国际专利分类库
 
历年真题 模拟考试 资料库 问答专区 专栏文章 知识分享 求职 招聘 代理所排行榜 代理人排行榜 代理所地域排行榜 找代理所 找代理人
PatentHub联系方式
官方Q群：924368187 官方Q群：931673531 官方Q群：529775260 商务QQ：2157717237 运营QQ：3307693423 电话：13264338900