使用uniapp实现微信小程序canvas签名功能

使用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>