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

权利要求书

1.一种基于HTML5 Canvas的绘图方法，其特征在于，包括以下步骤：

S1、创建底层canvas和操作层canvas，其中，操作层canvas的尺寸小于底层canvas的尺寸；

S2、根据预设的偏移数据，将操作层canvas覆盖于底层canvas之上；

S3、在操作层canvas上进行图像绘制，记录图像绘制轨迹；

S4、根据图像绘制轨迹，重新在底层canvas上进行图像绘制，以完成绘图。

2.根据权利要求1所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S1中底层canvas的尺寸为原始尺寸，所述操作层canvas的尺寸是将底层canvas的尺寸按照预先设置的比例进行缩小后的尺寸。

3.根据权利要求2所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S1中操作层canvas的尺寸具体为：

其中，W_O表示操作层canvas的宽度，H_O表示操作层canvas的高度，canvasWidth为底层canvas的宽度，canvasHeight为底层canvas的高度，CANVAS_SCALE表示预先设置的比例。

4.根据权利要求1所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S2中预设的偏移数据包括操作层canvas高度方向与底层canvas高度方向之间的距离，以及操作层canvas宽度方向与底层canvas宽度方向之间的距离。

5.根据权利要求4所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S3中图像绘制轨迹包括操作层canvas上鼠标或触摸的位置数据。

6.根据权利要求5所述的一种基于HTML5 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上需要进行绘制的坐标位置，在操作层canvas上绘制线条；

S36、对操作层canvas上的mouseup或touchend事件进行检测，若在操作层canvas上检测到mouseup或touchend事件，则记录mouseup或touchend事件触发时的鼠标或触摸位置，其中，mouseup事件对应为“鼠标按键松开”，touchend事件对应为“触摸离开”；

S37、将步骤S31、S33和S36中记录的鼠标或触摸位置数据整理为操作层canvas上的图像绘制轨迹。