老规矩,先上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.