第微信小程序canvas實現(xiàn)手寫簽名本文實例為大家分享了微信小程序canvas實現(xiàn)手寫簽名的具體代碼，供大家參考，具體內(nèi)容如下

很多時候，程序中需要用到簽名的功能，附上源碼（微信小程序）

.wxml

view

view請簽名：/view

view

view簽名區(qū)域/view

canvasdisable-scroll="true"

canvas-id="myCanvas"bindtouchstart="touchStart"bindtouchmove="touchMove"bindtouchend="touchEnd"

touchcancel="canvasEnd"binderror="canvasIdErrorCallback"/canvas

/view

/view

view

view

van-buttonroundcustom-type="info"plaincolor="#5359a7"

catchtap="clearDraw"清除/van-button

/view

view

van-buttonroundcustom-type="info"color="#1417b7"catchtap="submitDraw"

提交/van-button

/view

/view

.js

data:{

iphonex_height:app.globalData.iphonex_safe_area_height,//inphonex安全區(qū)高度

currentColor:'#000',

canvasw:0,

canvash:0,

userId:'',

signFile:'',

base64:'',

*生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

varthat=this;

that.setData({

userId:options.userId,

signFile:options.signFile,

name:,

drawId_:options.drawId,

list_:JSON.parse(options.list_),

userID:options.userID,

})

console.log(that.data.list_);

this.begin=false;

this.startX=0;

this.startY=0;

this.context=wx.createCanvasContext('myCanvas')

this.context.setLineWidth(4);

this.context.setLineCap('round');

this.context.setLineJoin('round');

wx.getSystemInfo({

success:function(res){

that.setData({

canvasw:res.windowWidth,//設(shè)備寬度

canvash:400

});

}

});

touchStart:function(e){

this.lineBegin(e.touches[0].x,e.touches[0].y)

//繪制中手指在屏幕上移動

touchMove:function(e){

if(this.begin){

this.lineAddPoint(e.touches[0].x,e.touches[0].y);

this.context.draw(true);

}

//繪制結(jié)束手指抬起

touchEnd:function(){

this.lineEnd();

//繪制線條結(jié)束

lineEnd:function(){

this.context.closePath();

this.begin=false;

//開始繪制線條

lineBegin:function(x,y){

this.begin=true;

this.context.beginPath()

this.startX=x;

this.startY=y;

this.context.moveTo(this.startX,this.startY)

this.lineAddPoint(x,y);

//繪制線條中間添加點

lineAddPoint:function(x,y){

this.context.moveTo(this.startX,this.startY)

this.context.lineTo(x,y)

this.context.stroke();

this.startX=x;

this.startY=y;

},

提交：請求接口

//提交

submitDraw(){

console.log("提交");

varthat=this;

console.log();

//跳轉(zhuǎn)攜帶的參數(shù)

if(=="sponsor_drawing"){

console.log("申請人簽字");

wx.canvasToTempFilePath({

canvasId:'myCanvas',

success:function(res){

if(that.startY==0){

wx.showToast({

icon:'none',

title:'您還沒有簽名',

})

}else{

//整理簽名格式

that.setData({

//轉(zhuǎn)base64

base64:wx.getFileSystemManager().readFileSync(res.tempFilePath,"base64").replace(/\s/g,""),

})

console.log("base64");

console.log(that.data.base64);

//請求接口提交信息

//申請人簽字

leturl='/release/releasedrawId='+that.data.drawId_+'signature='+`${encodeURIComponent(that.data.base64)}`;

letdata={}

wx.showLoading({

title:'發(fā)布中',

})

app.wxRequest('POST',1,url,data,(res)={

if(res.code==200){

wx.hideLoading();

Toast('提存信息發(fā)布成功');

if(that.data.list_!=null){

varissuer_=that.data.list_.issuer;//發(fā)布人信息

varaccept_=that.data.list_.accept;//受領(lǐng)人信息

if(app.globalData.note_bool){

for(vari=0;iaccept_.length;i++){

if(list_!=null){

that.call_function(1,issuer_[0].name,accept_[i].name,accept_[i].phone);//短信通知

}

}

}

}

setTimeout(function(){

wx.switchTab({

url:'/pages/user/mydrawing/index',

});

},500)

}else{

wx.hideLoading();

Toast('提存信息發(fā)布失敗');

}

},(err)={

wx.hideLoading();

Toast('加載失敗');

console.log(err);

})

}

},

})

}elseif(=="kuanApplyof"){

console.log("受領(lǐng)人簽字");

wx.canvasToTempFilePath({

canvasId:'myCanvas',

success:function(res){

if(that.startY==0){

wx.showToast({

icon:'none',

title:'您還沒有簽名',

})

}else{

//整理簽名格式

that.setData({

//轉(zhuǎn)base64

base64:wx.getFileSystemManager().readFileSync(res.tempFilePath,"base64"),

})

console.log("base64");

console.log(that.data.base64);

//請求接口提交信息

//list_=JSON.parse(list_);

console.log(that.data.list_);

leturl='/accept/applydrawId='+that.data.drawId_+'userId='+that.data.userID+'signature='+`${encodeURIComponent(that.data.base64)}`;

letdata={

account:that.data.list_.account,//開戶名

mobile:that.data.list_.mobile,//手機(jī)號

cardNo:that.data.list_.cardNo,//身份證號

bankName:that.data.list_.bankName,//開戶行

bankNo:that.data.list_.bankNo,//卡號

remarks:that.data.list_.remarks,//備注信息

applyMaterialList:that.data.list_.applyMaterialList,//申請材料信息

}

console.log(data);

wx.showLoading({

title:'確認(rèn)中',

})

app.wxRequest('POST',2,url,data,(res)={

console.log(res);

if(res.code==200){

wx.hideLoading();

Toast('確認(rèn)提存信息成功');

varname_accept=null;

for(vari=0;ithat.data.list_.accept_list.length;i++){

if(app.globalData.user_phone==that.data.list_.accept_list[i].mobile){

name_accept=that.data.list_.accept_list[i].name;

}

}

letsendMobile=app.globalData.sendMobile;//公證

if(that.data.list_!=nullname_accept!=null){

if(app.globalData.note_bool){

if(sendMobile!=''){

that.call_function(7,that.data.list_.issuer_list.realName,name_accept,sendMobile);

}

}

}

setTimeout(()={

wx.switchTab({

url:'/pages/user/perceptio/index',

})

},500)

}else{

wx.hideLoading();

Toast('確認(rèn)提存信息失敗');

}

},(err)={

wx.hideLoading();

Toast('加載失敗');

console.log(err);

})

}

},

})

}else{

Toast('提存信息發(fā)布失敗');

}

clearDraw(){

console.log("清除");

this.startY=0

this.context.draw()

this.context.setLineWidth(4);

this.context.setLineCap('round');

this.context.setLineJoin('round');

}

樣式(css)

/*miniprogram/pages/common/drawing/index.wxss*/

.contentBox{

width:100%;

background:#4f58a8;

.title{

font-size:30rpx;

color:#fff;

font-weight:600;

text-indent:20rpx;

padding:30rpx0;

.main{

padding-top:40rpx;

width:100%;

margin:0auto;

background:#ffffff;

border-radius:30rpx30rpx00;

.warningTitle{

width:90%;

margin:30rpxauto0;

font-weight:600;

line-height:60rpx;

font-size:40rpx;

.txtWarning{

line-height:20px;

widt