一、摘要
在微信小程序手势图案锁屏、解锁实现并提供onSuccess等回调一文中，用Canvas画布组件实现了类似Android和Iphone的图案锁屏、解锁功能，除去偶尔卡顿、滑动不连续外，其它都还不错。但是最近发现一个很严重的问题，当触摸很快划离画布的时候，Canvas组件没有触发touchend事件，本文针对这个问题作简单讨论，可以在一定程度上解决Canvas组件不触发touchend事件问题。
二、问题具体描述
屏幕截图
画布介绍：
width: 300px, height: 300px，为了本文后续部分便于计算，取width: 301px, height: 301px。
9个点，每个点的直径 = 点之间的距离 = 点与画布边距 = 301/7 = 43
划过的点，实心圆圈直径 = 每个点的直径/2 = 21.5
画布绑定了3个事件：
touchstart: 手指触摸动作开始（做个标记 touchFlag = true，触摸开始）touchmove：手指触摸后移动（绘制触摸点和线条）touchend：手指触摸动作结束（触摸结束，重置触摸标记 touchFlag = false，判断锁屏密码是否正确？重置画布）
操作描述：
左侧从上往下滑动，触摸到第三个点后，延着手机屏幕快速向下滑动，直至手指离开画布，这时悲剧的事情发生了，画布没有触发touchend事件，才会看到截图所示。理想状况应该会触发touchend事件，然后程序会判断锁屏密码是否正确？
三、解决方案
利用touchmove事件，捕捉画布边界，一旦捕捉到就人为触发touchend事件。
1、坐标认识
画布touchmove事件，获取到的坐标点(x,y)是相对于左上角(图中所示的小红点)，从左往右，x变大，从上往下，y变大。
捕捉画布边界，我们重点关注4个角的坐标点，即：左上角，右上角，右下角，左下角，连接这4个点，可以得到图中所示的红色小框区域，一旦在touchmove事件中捕捉到当前坐标点在红色小框区域外，即可人为触发touchend事件。
2、边界判定
四个角的坐标为：
1-(43,43), 2-(258,43), 3-(258,258), 4-(43,258)
假设，touchmove事件中获取的坐标为(x,y)，则只要满足：
x<43 || y<43 || x>258 || y>258
即可认定超过边界，人为触发touchend事件。
3、开篇问题解答
触摸到第三个点后，快速向下滑动直至手指离开画布，从图中我们可以看出第三个点到画布最下边之间有42的距离，手指划过这个距离，小程序画布组件基本上都可以触发touchmove事件，一旦触发了touchmove事件，那么：
touchmove坐标点(x,y)，其y肯定大于258，程序会自动人为触发touchend事件进行图案密码验证，也就不会出现图中所示的3点连线，屏幕没其它任何反应的怪事啦。
四、小结
虽然通过本文方法，可以一定程度上解决Canvas组件某些情况下不会触发touchend事件问题，但是不能杜绝。原因是touchmove事件也不一定会触发出来，还是以前面提到的图片为例，真机实验，第三个点后快速往下滑动直至离开画布，有几次touchmove事件没触发，导致是否越界无法判定，从而依然会出现文中提到的截图现象。
