效果如下：

源代碼

代碼比較簡(jiǎn)單，注釋也比較清晰

<template><view ><canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas><view class="footer"><view class="left" @click="finish" style="width: 100%;">確定</view></view></view> </template><script>var x = 20;var y =20;export default{data(){return {ctx: '', //繪圖圖像points: [], //路徑點(diǎn)集合 isEnd: false, // 是否結(jié)束簽名}},created() {this.ctx = uni.createCanvasContext("mycanvas",this); //創(chuàng)建繪圖對(duì)象//設(shè)置畫(huà)筆樣式this.ctx.lineWidth = 4;this.ctx.lineCap = "round"this.ctx.lineJoin = "round"this.ctx.fillStyle="#fff"this.ctx.fillRect(0,0,300,300);},methods:{//觸摸開(kāi)始，獲取到起點(diǎn)touchstart:function(e){let startX = e.changedTouches[0].x;let startY = e.changedTouches[0].y;let startPoint = {X:startX,Y:startY};this.points.push(startPoint);//每次觸摸開(kāi)始，開(kāi)啟新的路徑this.ctx.beginPath();},//觸摸移動(dòng)，獲取到路徑點(diǎn)touchmove:function(e){let moveX = e.changedTouches[0].x;let moveY = e.changedTouches[0].y;let movePoint = {X:moveX,Y:moveY};this.points.push(movePoint); //存點(diǎn)let len = this.points.length;if(len>=2){this.draw(); //繪制路徑}},// 觸摸結(jié)束，將未繪制的點(diǎn)清空防止對(duì)后續(xù)路徑產(chǎn)生干擾touchend:function(){ this.points=[];this.isEnd = true},/* ***********************************************# 繪制筆跡# 1.為保證筆跡實(shí)時(shí)顯示，必須在移動(dòng)的同時(shí)繪制筆跡# 2.為保證筆跡連續(xù)，每次從路徑集合中區(qū)兩個(gè)點(diǎn)作為起點(diǎn)（moveTo）和終點(diǎn)(lineTo)# 3.將上一次的終點(diǎn)作為下一次繪制的起點(diǎn)（即清除第一個(gè)點(diǎn)）************************************************ */draw: function() {let point1 = this.points[0]let point2 = this.points[1]this.points.shift()this.ctx.moveTo(point1.X, point1.Y)this.ctx.lineTo(point2.X, point2.Y)this.ctx.stroke()this.ctx.draw(true)},//清空畫(huà)布clear:function(){let that = this;uni.getSystemInfo({success: function(res) {let canvasw = res.windowWidth;let canvash = res.windowHeight;that.ctx.clearRect(0, 0, canvasw, canvash);that.ctx.draw(true);},})},//完成繪畫(huà)并保存到本地finish:function(){let that = thisif(!this.isEnd){uni.showToast({title: '請(qǐng)先完成簽名',icon: "none",duration: 1500,mask: true})return}uni.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {console.log(res)that.$emit('signDone',res.tempFilePath)// let path = res.tempFilePath;// uni.saveImageToPhotosAlbum({// filePath:path,// })} })}},} </script><style>.title{height:50upx;line-height: 50upx;font-size: 16px;}.mycanvas{width: 100%;height: 400upx;background-color: #ECECEC;}.footer{font-size: 16px;height: 150upx;display: flex;justify-content: space-around;align-items: center;}.left,.right{line-height: 100upx;height: 100upx;width: 250upx;text-align: center;font-weight: bold;color: white;border-radius: 5upx;}.left{background: #007AFF;}.right{background:orange;} </style>

uniapp 禁止頁(yè)面滾動(dòng)

如果是在彈窗里簽名，就需要禁止頁(yè)面滾動(dòng)，如果不禁止的話(huà)，書(shū)寫(xiě)簽名時(shí)頁(yè)面會(huì)晃動(dòng)

參考自u(píng)niapp 插件

總結(jié)

以上是生活随笔為你收集整理的uniapp 实现手写签名的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。