微信小程序电子签名

微信小程序电子签名

wxml

<view class="signName"><view class="btnList"><van-button size="small" bindtap="clearCanvas">清空</van-button></view><view class="handCenter"><canvas class="canvas" disable-scroll="{{true}}" id="myCanvas" bindtouchstart="scaleStart" bindtouchmove="scaleMove" bindtouchend="scaleEnd" bindtap="mouseDown" type="2d"></canvas></view>
</view>
<button bindtap="xiaZai">下载</button>

wxss

.signName{width: 100vw;height: 70vh;
}
.handCenter{height: 800rpx;
}
.canvas{width: 100%;height: 100%;background-color: burlywood;
}

js

Page({data: {canvas: {}},onShow() {const query = wx.createSelectorQuery()query.select('#myCanvas').fields({node: true,size: true}).exec((res) => {const canvas = res[0].nodeconst ctx = Context('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dprcanvas.height = res[0].height * dprthis.width = canvas.width;this.height = canvas.height;ctx.scale(dpr,  = ctx;this.setData({canvas: canvas})})},scaleStart(e) {let {x,y} = e.touches[0]console.log(x, beginPath()veTo(x, strokeStyle = "#000";lineWidth = '5'},scaleMove(e) {let {x,y} = e.touches[lineTo(x, stroke();lineCap = "round";veTo(x, y)},scaleEnd(e) {console.log(111, lineCap = "round";},xiaZai() {wx.canvasToTempFilePath({canvas: this.data.canvas, // canvas 实例success(res) {console.log(res);// canvas 生成图片成功wx.saveImageToPhotosAlbum({filePath: pFilePath,success(res) {// 保存成功wx.showToast({title: '已保存相册',icon: 'success',duration: 2000})}})}})},clearCanvas() {learRect(0, 0, this.width, this.draw(true)}
})