思 路
- 创建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的方法如下:

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

这样就创建了两个canvas画布

定义所需参数

  1. let l = 50,  //拼图的边长
  2.    x =150+Math.random()*(canvas_width-l-150), //裁剪的x坐标
  3.    y = 10+Math.random()*(canvas_height-l-10);//裁剪的y坐标
  4.    that.setData({
  5.      block_w:l,
  6.      y:y,
  7.      x:x
  8.    })

背景图的制作
使用block.drawImage(img, 0, 0, canvas_width, canvas_height);的方法使图片绘制到canvas上。
使用globalCompositeOperation = 'xor'的方法，使裁剪的那一块变得透明。

  1.      block.beginPath()
  2.    block.moveTo(x,y)
  3.    block.lineTo(x,y+l)
  4.    block.lineTo(x+l,y+l)
  5.    block.lineTo(x+l,y)
  6.    block.globalCompositeOperation = 'xor'
  7.    block.fill()
  8.    block.drawImage(img, 0, 0, canvas_width, canvas_height);
  9.    block.draw( )

有可能这里无法显示图片，把代码放到 onReady 下就可以了，用本地图片

拼图的制作
使用wx.canvasToTempFilePath方法，从另一张canvas画布上截取一块。

  1. canvas.drawImage(img, 0, 0, canvas_width, canvas_height);
  2.    canvas.draw(false, setTimeout(() => {
  3.      wx.canvasToTempFilePath({
  4.        x: x,
  5.        y: y,
  6.        width:l,
  7.        height: l,
  8.        canvasId: 'canvas1',
  9.        fileType: 'png',
  10.        success(res) {
  11.          console.log(res.tempFilePath)
  12.          that.setData({
  13.            pic: res.tempFilePath
  14.          })
  15.        },
  16.        fail: err => {
  17.          console.log(err)
  18.        }
  19.      }, this)
  20.    }, 500))

这样res.temFilePath就是我们截取出来的拼图了。
注意！如果图片是空白的，需要添加一个定时器 setTimeout() 清除 canvas 缓存
## 在滑动块上添加触控事件
滑动的过程需要两个事件来完成bindtouchmove='move' bindtouchend='end'
js中创建这两个事件。

  1. move:function(res){
  2.  let left = res.touches[0].pageX;
  3.   // 由于我这里是和page没有距离，也没有加外层盒子的，所以，pageX就是位移距离。
  4.  if (left>0){
  5.  this.setData({
  6.    left: left
  7.  })
  8.  }
  9.  else{
  10.    this.setData({
  11.      left:0
  12.    })
  13.  }
  14. },
  15. end:function(res){
  16.  let end = this.data.left,
  17.  moves = this.data.x;
  18. console.log(end)
  19.  })
  20. }
  21. }

判断，出结果

  1. end:function(res){
  2.  ...
  3.  ...
  4. if (Math.abs(end-moves)<2){  //当小于2px的可接受阈值时，验证成功
  5.  console.log('bingo')
  6.  wx.showToast({
  7.    title: '验证成功',
  8.    icon:'success',
  9.    duration:2000
  10.  })
  11.  setTimeout(function(){
  12.    wx.redirectTo({
  13.      url: 'verification',
  14.    })
  15.  },2000)
  16. }
  17. else{
  18.  this.setData({
  19.    left:0
  20.  })
  21. }
  22. }

参考github/pages/index)

  2. <canvas canvas-id='canvas1' class='canvas' ></canvas>
  3. <canvas canvas-id='block' class='block' ></canvas>
  5. <cover-image wx:if='{{pic}}' src="{{pic}}" class='three' style='top:{{y}}px;left:{{left+20}}px'></cover-image>
  6. <view class='container'>
  7.   <view class="area">
  8.     <movable-area>
  9.       <movable-view disable-scroll="true" direction="horizontal" bindtouchmove='move' bindtouchend='end' class='view' style='left:{{left}}px'>| | |</movable-view>
  10.     </movable-area>
  11.   </view>
  12.  </view>
  14. <view class="title">
  15.   拖动上方滑块完成拼图
  16.   <image src="../../styles/img/refresh.png" bindtap="refresh" class="refresh"></image>
  17. </view>
  18. <view class="prompt" wx:if="{{prompt}}">请控制切图块对齐缺口</view>

划重点 movable-area
这里因为小程序有左滑关闭，所以滑块区域和起始值加大一点

  1. /* pages/index/vfblock.wxss */
  3. .container{
  4.   position: relative;
  5.   overflow: hidden;
  6.   margin-top:180px;
  7.   height: 140rpx;
  8. }
  9. canvas{
  10.   top: 0
  11. }
  12. .canvas{
  13.   left: -9999px;
  14.   position: absolute;
  15.   z-index: -1;
  16. }
  17. .block{
  18.   width: 100vw;
  19.   height: 30vh;
  20.   position: absolute; 
  22. }
  23. .three{
  24.   position: absolute;
  25.   width: 50px;
  26.   height: 50px;
  27.   z-index: 999;
  28.   border: 2px dashed rgb(252, 252, 252);
  29.   box-sizing: border-box;
  30. }
  31. .view {
  33.   text-align: center;
  34.   height: 70rpx;
  35.   width: 120rpx;
  36.   line-height: 70rpx;
  37.   background: #3a82fa;
  38.   color: #fff;
  39.   border-radius: 40rpx;
  40.   overflow: hidden;
  41.   box-shadow: 2px 2px 2px 2px rgba(44, 117, 244,0.3)
  42. }
  43. .area {
  44.   height: 40rpx;
  45.   width: 95%;
  46.   background-color: #e5e5e5;
  47.   /* overflow: hidden; */
  48.   border-radius: 20rpx;
  49.   margin: 50rpx auto;
  50. }
  51. movable-area{
  52.   position: absolute;
  53.   top:35rpx;
  54.   width: 120rpx;
  55.   height: 70rpx;
  56. }
  57. .title{
  58.   text-align: center;
  59.   font-weight: 500;
  60.   font-size: 36rpx;
  61.   width: 100%;
  62.   height: 75rpx;
  63.   line-height: 75rpx;
  64.   position: relative;
  65. }
  66. .refresh{
  67.   width: 60rpx;
  68.   height: 60rpx;
  69.   position: absolute;
  70.   right: 40rpx;
  71.   top: 50%;
  72.   transform: translate(0,-50%);
  73. }
  74. .prompt{
  75.   width: 95%;
  76.   height: 44rpx;
  77.   margin: 20rpx auto;
  78.   color: #fa3a3a;
  79.   font-size: 30rpx;
  80.   font-weight: 500;
  81. }
  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     img:'',
  8.     width:'',
  9.     height:'',
  10.     pic:'',
  11.     y:'',
  12.     x:'',
  13.     left:0,
  14.     prompt:false
  15.   },
  17.   /**
  18.    * 生命周期函数--监听页面加载
  19.    */
  20.   onLoad: function (options) {
  21.   },
  23.   /**
  24.    * 生命周期函数--监听页面初次渲染完成
  25.    */
  26.   onReady: function () {
  27.     this.verification()
  28.   },
  29. move:function(res){
  30.   let left = res.touches[0].pageX;
  31.   if (left>0){
  32.   this.setData({
  33.     left: left,
  34.     prompt:false
  35.   })
  36.   }
  37.   else{
  38.     this.setData({
  39.       left:0
  40.     })
  41.   }
  42. },
  43. end:function(res){
  44.   var that = this
  45.   let end = this.data.left,
  46.   moves = this.data.x-20;
  47. if (Math.abs(end-moves)<5){
  48.   console.log('bingo')
  49. }
  50. else{
  51.   this.setData({
  52.     left:0,
  53.     prompt:true
  54.   })
  55.   //这里加了个动画提示效果
  56.   this.animate('.prompt', [
  57.     { translateX: -5 },
  58.     { translateX: 5 },
  59.     { translateX: -5 },
  60.     { translateX: 5 },
  61.     { translateX: -5 },
  62.     { translateX: 5 },
  63.   ], 200, function () {
  64.     this.clearAnimation('.prompt', { translateX: true }, function () {
  65.     })
  66.     setTimeout(()=>{
  67.       this.setData({
  68.         prompt: false
  69.       })
  70.     },500)
  71.   }.bind(this))
  72. }
  73. },
  74. //刷新
  75. refresh:function(){
  76.   this.verification()
  77.   this.setData({
  78.     left:0
  79.   })
  80. },
  81. verification:function()
  82. {
  83.   let that = this;
  84.   wx.getSystemInfo({
  85.     success: function (res) {
  86.       let width = res.windowWidth;
  87.       let height = res.windowHeight;
  88.       that.setData({
  89.         width: width,
  90.         height: height
  91.       })
  92.     },
  93.   })
  94.   const canvas = wx.createCanvasContext('canvas1');
  95.   const block = wx.createCanvasContext('block'),
  96.     three = wx.createCameraContext('three');
  97.   const img = that.data.img,
  98.     canvas_width = that.data.width,
  99.     canvas_height = that.data.height * 0.3;
  100.   let l = 50,
  101.     x = 150 + Math.random() * (canvas_width - l - 150),
  102.     y = 10 + Math.random() * (canvas_height - l - 10);
  103.   that.setData({
  104.     block_w: l,
  105.     y: y,
  106.     x: x
  107.   })
  108.   canvas.drawImage(img, 0, 0, canvas_width, canvas_height);
  109.   canvas.draw(false, setTimeout(() => {
  110.     wx.canvasToTempFilePath({
  111.       x: x,
  112.       y: y,
  113.       width: l,
  114.       height: l,
  115.       canvasId: 'canvas1',
  116.       fileType: 'png',
  117.       success(res) {
  118.         console.log(res.tempFilePath)
  119.         that.setData({
  120.           pic: res.tempFilePath
  121.         })
  122.       },
  123.       fail: err => {
  124.         console.log(err)
  125.       }
  126.     }, this)
  127.   }, 500))
  128.   block.beginPath()
  129.   block.moveTo(x, y)
  130.   block.lineTo(x, y + l)
  131.   block.lineTo(x + l, y + l)
  132.   block.lineTo(x + l, y)
  133.   block.globalCompositeOperation = 'xor'
  134.   block.fill()
  135.   block.drawImage(img, 0, 0, canvas_width, canvas_height);
  136.   block.draw() 
  137. }
  139. })