【项目难点】小程序使用canvas实现电子签名功能（简易版）

因为这是个简易版，所以代码行数不多，直接贴上代码再看。

<template>
    <view class="main-container">

        <view class="main-left"  @touchmove='touchMove' @touchstart='touchStart' @touchend='touchEnd'>
            <canvas class="left-canvas-area"  canvas-id="signature-box"></canvas>
        </view>
        <view class="main-right">
            <button class="right-btn-reset" @click="resetHandler">重置</button>
            <button class="left-btn-save" @click="saveHandler">保存</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                ctx:{},
                x:0,
                y:0,
                count:0
            }
        },
        methods: {
            touchMove(e){
                this.ctx.setFillStyle('#111111')
                this.ctx.arc(e.touches[0].pageX,e.touches[0].pageY,5,0,2*Math.PI)
                this.ctx.fill()
                this.ctx.draw(true)
                this.ctx.stroke()
                this.ctx.draw(true)
            },
            touchStart(e){
                console.log('start->',e.touches[0].pageX,e.touches[0].pageY)
                this.x = e.touches[0].pageX
                this.y = e.touches[0].pageY
                this.ctx.moveTo(this.x,this.y)
            },
            touchEnd(e){
                console.log('end',e)
            },
            resetHandler(){
                this.ctx.clearRect(0,0,1000,1000)
                this.ctx.draw()
            },
            saveHandler(){
                wx.canvasToTempFilePath({
                    canvasId: 'signature-box',
                    fileType: 'jpg',
                    quality: 1,
                    success: (res) => {
                        wx.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: () => {
                                console.log('保存成功')
                            },
                            fail: () => {},
                            complete: () => {}
                        })
                    },
                    fail: () => {},
                    complete: () => {}
                })
            }
        },
        onShow(){
            this.ctx = wx.createCanvasContext('signature-box')
        }
    }
</script>

<style lang="scss">
.main-left{
    position:fixed;
    top:0;
    width: 100vw;
    height:80vh;
    
}
.left-canvas-area{
    width: 100%;
    height: 100%;
}
.main-right{
    position: fixed;
    top: 80vh;
    left: 0;
    height: 20vh;
    width: 100vw;
}
</style>

主要是理解小程序或者移动端的三个事件，touchstart、touchmove、touchend。可以参考这篇文章
绑定事件以后，直接传入事件的参数，然后可以从事件里面拿到触点位置信息，进行绘制即可。
要注意以下几点:
1、如果使用lineTo的方法，一定要记得在touchstart时跟着把绘制的焦点moveTo到触点上，不然会画出从左上角拉下来的直线。
这里我是用arc的方法来实现的，就是一旦位移就以其触点为圆心画圆，虽然也是实现了，但在移速快的情况下会出现点之间不连续，推荐使用lineTo的方法来实现。
2、一般来讲还要配置一个重置功能，使用clearRect来处理就可以了。
3、在画的时候，一定要用draw(true)，不然每次画都会把上次的刷新掉。

这里样式就不调了，因为没有应用到具体功能上，而且正确的使用方式应该是把手机横过来。