微信小程序实现手写签名_javascript技巧_

var content = null; var touchs = []; var canvasw = 0; var canvash = 0; var that = null;   Page({   /**    * 页面的初始数据    */   data: {        },   // 画布的触摸移动开始手势响应   start: function(event) {     // console.log("触摸开始" + event.changedTouches[0].y)     // console.log("触摸开始" + event.changedTouches[0].x)     //获取触摸开始的 x,y     let point = {       x: event.changedTouches[0].y,       y: event.changedTouches[0].x     }     touchs.push(point)   },     // 画布的触摸移动手势响应   move: function(e) {     let point = {       x: e.touches[0].y,       y: e.touches[0].x     }     touchs.push(point)     if (touchs.length >= 2) {       this.draw(touchs)     }   },     // 画布的触摸移动结束手势响应   end: function(e) {     // console.log("触摸结束" + e)     //清空轨迹数组     for (let i = 0; i < touchs.length; i++) {       touchs.pop()     }     },     /**    * 生命周期函数--监听页面加载    */   onLoad: function(options) {     that = this     //获得Canvas的上下文     content = wx.createCanvasContext('firstCanvas')     //设置线的颜色     content.setStrokeStyle("#000")     //设置线的宽度     content.setLineWidth(5)     //设置线两端端点样式更加圆润     content.setLineCap('round')     //设置两条线连接处更加圆润     content.setLineJoin('round')   },     /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function() {       // 获取画布尺寸     var query = wx.createSelectorQuery()     query.select('#canvas').boundingClientRect()     query.exec(function(res) {       canvasw = res[0].width;       canvash = res[0].height     })   },     //绘制   draw: function(touchs) {     let point1 = touchs[0]     let point2 = touchs[1]     touchs.shift()     content.moveTo(point1.y, point1.x)     content.lineTo(point2.y, point2.x)     content.stroke()     content.draw(true)   },   //清除操作   clearClick: function() {     //清除画布     content.clearRect(0, 0, canvasw, canvash)     content.draw(true)   },   //保存图片   saveClick: function() {     var that = this     wx.canvasToTempFilePath({       canvasId: 'firstCanvas',       success: function(res) {         //打印图片路径         var path = res.tempFilePath         //上传图片         that.uploadSignPic(path)         console.log(path)           }     })   },       /**    * 上传签名图片    */   uploadSignPic: function(path) {       //具体实现的业务逻辑   }   })

   请在区域内进行签名                                      内容清除                        确认提交        

.hand_writing_container {   width: 100%;   padding: 5.503vh 8.1761vh 0;   box-sizing: border-box; }   .tips_title {   height: 4.72vh;   line-height: 4.72vh;   margin-bottom: 3.459vh;   font-size: 4.71698vh;   font-family: Source Han Sans CN;   font-weight: 500;   color: rgba(45, 45, 45, 1); }   .canvas {   width: 100%;   height: 66.194968vh;   margin-bottom: 3.7735849vh;   box-sizing: border-box;   border: 1rpx dashed black; }   .firstCanvas {   background-color: white;   width: 100%;   height: 100%; }   .btn_container {   display: flex;   align-items: center;   padding: 0 45.44vh;   box-sizing: border-box;   justify-content: space-between; }   .btn {   width: 45.597484vh;   height: 13.83647798vh;   padding: 0 11vh;   box-sizing: border-box;   border-radius: 1.572327vh;   display: flex;   justify-content: space-between;   align-items: center; }   .btn image {   flex: 0 0 4.71698vh;   width: 4.71698vh;   height: 4.71698vh;   display: block;   margin-right: 1.88679vh; }   .btn text {   flex: 0 0 auto;   height: 4.717vh;   line-height: 4.717vh;   font-size: 4.71698vh;   font-family: Source Han Sans CN;   font-weight: 400;   color: rgba(255, 255, 255, 1); }   .clean {   background-color: #07c160; }   .submit {   background-color: #ff3d33; }