老规矩先上Demo:
x:canvas中裁剪区域的横坐标
,y:canvas中裁剪区域的纵坐标
l:拼图的边长
fill()
的方法裁剪出一个洞
x
的差距,如果两者小于一定阈值则验证成功,反之失败
在微信小程序中,由于不能操作DOM所以要想更改样式需要在组件中用style
表明,在data
中修改通过{{}}
渲染出来。比如我们需要控制canvas距离顶部的高度除了在wxss中定义以外,还可以使用canvas
这样就创建了两个canvas画布
有可能这里无法顯示图片把代码放到 onReady 下就可以了
res.temFilePath就是我们截取出来的拼图了。
这样
注意!如果图片是空白的需要添加一个定时器 setTimeout() 清除 canvas 缓存
仅供参考,我是菜鸟轻喷。