本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码，供大家参考，具体内容如下
<template>
<div class="sign">
<div class="header">
<i class="el-icon-arrow-left backImg" @click="goBack"></i>
<span class="title">个人签名</span>
</div>
<section class="signature">
<div class="signatureBox">
<div class="canvasBox" ref="canvasHW">
<canvas ref="canvasF" class="canvasStyle" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas>
</div>
</div>
</section>
<div class="btnBox">
<div @click="overwrite" class="btn1">重置</div>
<div @click="commit" class="btn1">确定</div>
</div>
<div class="imglist-box" :style="imgUrlList.length>0 ? 'border: 1px solid #d9d9d9;' : ''">
<img v-for="i in imgUrlList" class="imgCanvas" :src="i">
<img v-show="imgUrlList.length>0" src="../../assets/img/signdelete.png" class="resign" @click="deleteAll">
</div>
<div class="tijiao-box">
<button @click="commitAll" class="tijiao">提 交</button>
</div>
</div>
</template>
<script>
import { Bus } from '@/utils'
export default {
name:'personsign',
data() {
return {
stageInfo:'',
imgUrl:'',
imgUrlList:[],
client: {},
points: [],
canvasTxt: null,
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
endY: 0,
endX: 0,
w: null,
h: null,
isDown: false,
isViewAutograph: this.$route.query.isViews > 0,
contractSuccess: this.$route.query.contractSuccess,
}
},
mounted() {
let canvas = this.$refs.canvasF
canvas.height = this.$refs.canvasHW.offsetHeight -0
canvas.width = this.$refs.canvasHW.offsetWidth - 0
this.canvasTxt = canvas.getContext('2d')
this.canvasTxt.lineWidth = 4
this.stageInfo = canvas.getBoundingClientRect()
},
methods: {
goBack(){
this.$router.go(-1)
// session.clear()
},
//mobile
touchStart(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clienX,
y: ev.targetTouches[0].clientY,
}
this.startX = obj.x
this.startY = obj.y
this.canvasTxt.beginPath()
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
