canvas画直线升级版可保存上次所画直线

今天改版升级一下：

遇到两个问题

一、用touchmove事件记录手指的滑动，如果开启保存上次绘画，则会出现并非直线而是成片的效果；

二、用touchend事件记录触摸结束坐标在滑动过程中看不到线，只有松开手指才可以渲染出来。

先上效果

wxml代码

<button>画直线升级版</button>
<canvas bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" class="canvas" canvas-id="1"></canvas>

js代码

// pages/lineUp/lineUp.js
 /*目标：在画完一条直线之后可已保留已画直线，开始新的直线
  *逻辑：利用touchend事件记录结束坐标；
  *     设置reserve:true
  *     本次绘制是否接着上一次绘制，即reserve参数为false，
  *     则在本次调用drawCanvas绘制之前native层应先清空画布
  *     再继续绘制；若reserver参数为true，则保留当前画布上
  *     的内容，本次调用drawCanvas绘制的内容覆盖在上面，默
  *        认 false
  */
Page({
    data:{
      startX:0,//开始X坐标
      startY:0,//开始Y坐标
      moveX:0, //移动X坐标
      moveY:0, //移动Y坐标
      endX:0,  //结束X坐标
      endY:0   //结束Y坐标
    },
    //手指触摸开始
    canvasStart:function(e){
        var that = this;
        console.log(e)
        //将起始坐标传递给变量
        that.setData({
          startX:e.touches[0].x,
          startY:e.touches[0].y
        });
    },
    //手指触摸移动
    canvasMove:function(e){
        var that = this;
        console.log(e)
        //将移动记录坐标传递给变量
        that.setData({
          moveX:e.touches[0].x,
          moveY:e.touches[0].y
        });
        //定义context存储绘画动作上下文
        // var context = wx.createContext();
        // //设置直线宽度
        // context.setLineWidth(4);
        // //直线起点
        // context.lineTo(that.data.startX,that.data.startY);
        // //直线终点
        // context.lineTo(that.data.moveX,that.data.moveY);
        // //设置描边
        //  context.stroke();
        //   wx.drawCanvas({
        //     canvasId: '1',
        //     actions: context.getActions(),
        //     reserve:false
        //   })      
    },
    //手指触摸结束
    canvasEnd:function(e){
        console.log(e)
         var that = this;
        console.log(e)
        //将移动记录坐标传递给变量
        that.setData({
          endX:e.changedTouches[0].x,
          endY:e.changedTouches[0].y
        });
        //定义context存储绘画动作上下文
        var context = wx.createContext();
        //设置直线宽度
        context.setLineWidth(4);
        //直线起点
        context.lineTo(that.data.startX,that.data.startY);
        //直线终点
        context.lineTo(that.data.endX,that.data.endY);
        //设置描边
         context.stroke();
          wx.drawCanvas({
            canvasId: '1',
            actions: context.getActions(),
            reserve:true
          })      
    },  
})