小程序画布电子签名（实例）

html

 <view class='container'>   <!-- 签名画布 -->   <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback">    </canvas>    <view class='buttonBox'>     <button bindtap='clickMe' class='addbutton' open-type="getuserinfo">点击我生成图片保存相册</button>     <button type="default" class='delbutton' bindtap="cleardraw">清除</button>    </view> </view>

js

 // canvas 全局配置 var context = null; var isButtonDown = false; var arrx = []; var arry = []; var arrz = []; var canvasw = 0; var canvash = 0; //注册页面 Page({   canvasIdErrorCallback: function (e) {     console.error(e.detail.errMsg)   },   //开始   canvasStart: function (event) {     isButtonDown = true;     arrz.push(0);     arrx.push(event.changedTouches[0].x);     arry.push(event.changedTouches[0].y);    },   data: {     src: "",     img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=578899140,1412678472&fm=27&gp=0.jpg",     rpx: ''   },    onLoad: function (options) {     var that = this     // 使用 wx.createContext 获取绘图上下文 context     context = wx.createCanvasContext('canvas');     context.beginPath()     context.setStrokeStyle('#000000');     context.setLineWidth(4);     context.setLineCap('round');     context.setLineJoin('round');      // context.drawImage('../../images/img111.png', 0, 0, canvasw, 500);     context.draw();   },    //过程   canvasMove: function (event) {     var that = this     if (isButtonDown) {       arrz.push(1);       console.log(event)       arrx.push(event.changedTouches[0].x);       arry.push(event.changedTouches[0].y);     };      for (var i = 0; i < arrx.length; i++) {       if (arrz[i] == 0) {         context.moveTo(arrx[i], arry[i])       } else {         context.lineTo(arrx[i], arry[i])       };      };     context.clearRect(0, 0, canvasw, canvash);     context.setStrokeStyle('#000000');     context.setLineWidth(4);     context.setLineCap('round');     context.setLineJoin('round');     context.stroke();      context.draw(false);   },   // 点击保存图片   clickMe: function () {     wx.canvasToTempFilePath({       canvasId: 'canvas',       fileType: 'jpg',       success: function (res) {         console.log(res)         wx.saveImageToPhotosAlbum({           filePath: res.tempFilePath,           success(res) {             console.log(res)             wx.hideLoading();             wx.showToast({               title: '保存成功',             });             // //存入服务器             // wx.uploadFile({             //   url: 'a.php', //接口地址             //   filePath: res.tempFilePath,             //   name: 'file',             //   formData: {                                 //HTTP 请求中其他额外的 form data              //     'user': 'test'             //   },             //   success: function (res) {             //     console.log(res);              //   },             //   fail: function (res) {             //     console.log(res);             //   },             //   complete: function (res) {             //   }             // });           },           fail() {             wx.hideLoading()           }         })       }     })   },   canvasEnd: function (event) {     isButtonDown = false;   },   cleardraw: function () {     //清除画布     arrx = [];     arry = [];     arrz = [];     context.draw(false);   },  })

css

 .canvas {   width: 100%;   height: 93%;   border-bottom: 1rpx solid #e2e2e2e2;     position: fixed;   box-sizing: border-box; }   .imageCanvas{   width: 100%;   height: 300rpx; } .buttonBox{   width: 100%;   justify-content: center;   display: flex;   position: fixed;   bottom: 0;   left: 0; } 

有帮助到大家的关注我

会一直更新小程序常用技术及新玩法。

文章来源: 小程序画布电子签名（实例）