使用uniapp实现微信小程序canvas签名功能,废话不多说,直接上代码。
欢迎体验
<template>
<view class="canvas-content">
<!-- 画布 -->
<canvas
class="mycanvas"
disable-scroll="true"
canvas-id="Canvas"
id="Canvas"
@touchstart="touchstart"
@touchmove="canvasTouchmove"
@touchend="touchend"
>
</canvas>
</view>
</template>
<script>
export default {
data() {
return {
ctx: null,
points: [],
touchstartX: 0,
touchstartY: 0,
len: 0
}
},
onLoad() {
this.ctx = uni.createCanvasContext("Canvas")
},
methods: {
touchstart(e) {
let x = e.changedTouches[0].x
let y = e.changedTouches[0].y
let startPoint = { X: x, Y: y }
this.points.push(startPoint)
this.ctx.beginPath()
this.touchstartX = x
this.touchstartY = y
e.preventDefault()
},
canvasTouchmove(e) {
let moveX = e.changedTouches[0].x
let moveY = e.changedTouches[0].y
this.points.push({ X: moveX, Y: moveY })
this.len = this.points.length
if (this.len > 2) {
let point1 = this.points[0]
let point2 = this.points[1]
this.points.shift()
this.ctx.lineCap = "round"
this.ctx.lineJoin = "round"
this.ctx.lineWidth = '2'
this.ctx.moveTo(point1.X, point1.Y)
this.ctx.lineTo(point2.X, point2.Y)
this.ctx.strokeStyle = "#000000"
this.ctx.stroke()
this.ctx.draw(true)
}
e.preventDefault()
},
touchend(e) {
this.points = []
this.len = 0
this.touchstartX = 0
this.touchstartY = 0
e.preventDefault()
},
}
}
</script>
<style lang="scss" scoped>
.mycanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>