大小自己根据实际情况自己改
直接上代码
<template>
<view>
<canvas style="width: 300px; height: 200px;border: 1px solid;"
canvas-id="firstCanvas1"
id="firstCanvas1"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
></canvas>
</view>
</template>
<script>
let context1= null;
export default {
name:"llt_signature",
data() {
return {
canvasData:[]
};
},
watch: {
canvasData() {
if(!this.canvasData.length){
return
}
context1.moveTo(this.canvasData[0].x, this.canvasData[0].y)
for (let i = 0; i < this.canvasData.length; i++) {
context1.lineTo(this.canvasData[i].x, this.canvasData[i].y)
}
context1.stroke()
context1.draw(true)
}
},
created() {
context1= uni.createCanvasContext('firstCanvas1',this)
context1.setLineWidth(1)
context1.setStrokeStyle("#000000")
},
methods:{
handleTouchStart(e) {
this.canvasData=[]
const a = e.changedTouches[0]
this.canvasData.push({
x: a.x,
y: a.y
})
},
handleTouchMove(e) {
const a = e.changedTouches[0]
this.canvasData.push({
x: a.x,
y: a.y
})
},
handleTouchEnd(e) {
const a = e.changedTouches[0]
this.canvasData.push({
x: a.x,
y: a.y
})
this.$emit('canvasDataChange',this.canvasData)
},
handleEnd() {
context1.stroke()
context1.draw(true)
},
}
}
</script>
<style lang="scss">
</style>