微信小程序实现滑块验证码

老规矩，先上Demo:

---

思 路

• 创建2个canvas，一个当作背景，一个当作拼图。
• 传入3个参数，x:canvas中裁剪区域的横坐标，y:canvas中裁剪区域的纵坐标，l:拼图的边长
• 背景图使用fill()的方法裁剪出一个洞
• 拼图使用wx.canvasToTempFilePath的方法裁剪成一个拼图图片。
• 小程序中的触控事件bindtouchmove,bindtouchend分别记录移动的距离和松手时的距离
• 判断移动距离和x的差距，如果两者小于一定阈值，则验证成功，反之失败。

开始操作

创建两个canvas

在微信小程序中，由于不能操作DOM，所以要想更改样式需要在组件中用style表明，在data中修改，通过{ {}}渲染出来。比如我们需要控制canvas距离顶部的高度，除了在wxss中定义以外，还可以使用<canvas style='top:{ {this.data.top}}rpx'>这种方式实现。小程序中操作创建canvas的方法如下:

const canvas = wx.createCanvasContext('canvas1'),
     block = wx.createCanvasContext('block');

这样就创建了两个canvas画布

定义所需参数

 let l = 50,  //拼图的边长
    x =150+Math.random()*(canvas_width-l-150), //裁剪的x坐标
    y = 10+Math.random()*(canvas_height-l-10);//裁剪的y坐标
    that.