[发明专利]一种基于HTML5 Canvas的绘图方法

说明书

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

技术领域

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

背景技术

HTML5提供了canvas标签，以通过脚本(通常是JavaScript)来绘制图形。它不仅可以用于绘制图表、制作图片，甚至可以制作动画和游戏，目前大部分的浏览器(如桌面和移动版的Chrome、Firefox、Safari等)几乎都对canvas有比较好的支持，这使得众多企业和开发者能以较低的成本实现跨平台的、以图形展示和动画为主的前端应用程序。

以手写签名的功能模块为例，该功能模块用途广泛，可以运用在各种场景，比如在理财产品的签约界面上请用户签名确认签约，但是企业或开发者需要保证该功能模块能够兼容iOS、Android、甚至Windows等各类操作系统。

传统经常使用的技术手段是基于canvas开发Web APP，同时采用HTML5+WKWebView/UIWebView/WebView/CEF的组合技术方案，以开发跨平台APP。利用canvas实现绘图功能的解决方案大多是利用在canvas上检测鼠标点击、松开事件或手指的触摸、离开事件，从而控制在canvas上调用canvas的绘图API绘制线条。具体的步骤一般包括：

一、在鼠标点击、手指触摸时，调用canvas的移动绘制起点API(ApplicationProgramming Interface，应用程序接口)；

二、在鼠标没有松开或手指没有离开屏幕时，监听鼠标、手指移动事件，每次事件被触发时，调用绘制直线API并重新调用移动绘制起点API，形成绘制连续线条的目的；

三、在鼠标松开或手指离开屏幕时，取消对监听鼠标、手指移动事件的触发处理，结束绘制。

上述方法在Chrome、Firefox、iOS设备上能够实现较好的绘图功能，能够保证一笔一画均贴合手指和鼠标的移动轨迹。但是，在Android设备上测试时，就可能出现滑动不跟手、线条不平滑等问题。除了设备、操作系统和浏览器的性能差异之外，产生这一问题的主要原因是由于HTML5的canvas绘制表现与canvas本身大小有关，在目前移动设备普遍拥有高DPI(Dots Per Inch，每英寸点数)、高分辨率的情况下，铺满全屏的canvas通常会占据三、四百万个像素，在这样大小的canvas上进行绘图必然会导致响应性能的滞后。

为此，现有技术考虑改变canvas绘制区域的大小以提升响应性能，canvas绘制区域的大小是通过canvas本身带有的属性width(宽度)和height(高度)来决定，但是其本身呈现的大小可以通过CSS(Cascading Style Sheets，层叠样式表)的width和height来指定。开发者可以定义一个CANVAS_SCALE属性，通过将CSS中width和height乘以CANVAS_SCALE，从而设置canvas中width和height属性值。例如：将CANVAS_SCALE设置为0.5，那么在canvas的CSS属性中设置width和height分别为3000和2000时，canvas实际绘制区域大小将改变为1500*1000。

设置CANVAS_SCALE有非常明显的好处：一是开发者可以根据设备类型和性能动态调整这个值(比如，在PC使用时可以将其设置为1，而在Android移动端使用时设置为0.5)；