申请/专利权人：交通银行股份有限公司

申请日：2019-11-29

公开（公告）日：2024-02-13

公开（公告）号：CN111078035B

主分类号：G06F3/0354

分类号：G06F3/0354;G06F3/038;G06F3/0484;G06F3/0488

优先权：

专利状态码：有效-授权

法律状态：2024.02.13#授权;2020.05.22#实质审查的生效;2020.04.28#公开

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

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

全文数据：

权利要求：

百度查询： 交通银行股份有限公司 一种基于HTML5 Canvas的绘图方法

免责声明
1、本报告根据公开、合法渠道获得相关数据和信息，力求客观、公正，但并不保证数据的最终完整性和准确性。
2、报告中的分析和结论仅反映本公司于发布本报告当日的职业理解，仅供参考使用，不能作为本公司承担任何法律责任的依据或者凭证。

阅读全文 双屏查看 官方信息 专利公告 收藏专利 下载PDF 下载WORD