申明：本篇文章我只改动了，并非原创
首先进行页面布局，wxml文件代码：
<view class="lock-box">
<view class="lock-title {{titleColor}}">
{{title}}
</view>
<view hidden="{{resetHidden}}" bindtap="lockreset" class="lock-reset">重置1. -
</view>
<canvas disable-scroll="true" class="lock-cav" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" canvas-id="locker" style="width:686rpx;height:686rpx;">
</canvas>
</view>这里需要对解锁提示语{{title}}，解锁提示语颜色{{titleColor}}，重置按钮的显示隐藏{{resetHidden}}进行动态数据绑定；然后对canvas进行三个touch事件绑定；重要：一定要设置disable-scroll=”true” 属性，此属性是当手指在canvas上触摸时，当前页面（page）不会被拖拽，不然就没法正常绘图了，而且这里必须要用bindXXX,用。catchXXX还是会被拖拽，而且三种事件都要加上
主页js代码
// pages/main/index.js
var wxlocker = require(“../../utils/wxlocker.js”);
Page({
data:{
title:’请设置手势密码’,
resetHidden:false,
titleColor:””
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数wxlocker.lock.init();
this.initState();
},
onReady:function(){
},
onShow:function(){// 页面显示
},
onHide:function(){
// 页面隐藏
},onUnload:function(){
// 页面关闭},
//设置提示语与重置按钮
initState:function(){
var resetHidden = wxlocker.lock.resetHidden;
var title = wxlocker.lock.title;
var titleColor = wxlocker.lock.titleColor;
this.setData({
resetHidden:resetHidden,
title:title,
titleColor:titleColor
});
},
//touchstart事件绑定
touchS:function(e){
wxlocker.lock.bindtouchstart(e);
},
//touchmove事件绑定
touchM:function(e){
wxlocker.lock.bindtouchmove(e);
},
//touchend事件绑定
touchE:function(e){
wxlocker.lock.bindtouchend(e,this.lockSucc);
this.initState();
},
//解锁成功的回调函数
lockSucc:function(){
console.log(“解锁成功！”);
//do something
},
lockreset:function(){
wxlocker.lock.updatePassword();
this.initState();
}
})- wxlocker.js主要代码部分：
var wxlocker = function(obj){
// 33的圆点格子
this.chooseType = 3;
};
创建wxlocker对象，并设置属性chooseType，代表绘制nn的圆圈；
wxlocker.prototype.drawPoint = function() {
// 初始化圆心
for (var i = 0 ; i < this.lastPoint.length ; i++) {
this.ctx.setFillStyle(‘#10AEFF’);
this.ctx.beginPath();
this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y,
this.r / 2, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.fill();
}
}
wxlocker.prototype.drawStatusPoint = function(type) {
// 设置手指经过的圆圈颜色，type为色值
for (var i = 0 ; i < this.lastPoint.length ; i++) {
}this.ctx.setStrokeStyle(type); this.ctx.beginPath(); this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true); this.ctx.closePath(); this.ctx.stroke();
wx.drawCanvas({
});canvasId: "locker", actions: this.ctx.getActions(), reserve:true
}
wxlocker.prototype.drawLine = function(po, lastPoint) {
// 绘制线条轨迹
this.ctx.beginPath();
this.ctx.setLineWidth(1);
this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
for (var i = 1 ; i < this.lastPoint.length ; i++) {
}this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
this.ctx.lineTo(po.x, po.y);
this.ctx.stroke();
this.ctx.closePath();
