今天改版升級一下：

遇到兩個問題

一、用touchmove事件記錄手指的滑動，如果開啟保存上次繪畫，則會出現(xiàn)并非直線而是成片的效果；

二、用touchend事件記錄觸摸結(jié)束坐標(biāo)在滑動過程中看不到線，只有松開手指才可以渲染出來。

先上效果

wxml代碼

<button>畫直線升級版</button>
<canvas bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" class="canvas" canvas-id="1"></canvas>

js代碼

// pages/lineUp/lineUp.js
 /*目標(biāo)：在畫完一條直線之后可已保留已畫直線，開始新的直線
  *邏輯：利用touchend事件記錄結(jié)束坐標(biāo)；
  *     設(shè)置reserve:true
  *     本次繪制是否接著上一次繪制，即reserve參數(shù)為false，
  *     則在本次調(diào)用drawCanvas繪制之前native層應(yīng)先清空畫布
  *     再繼續(xù)繪制；若reserver參數(shù)為true，則保留當(dāng)前畫布上
  *     的內(nèi)容，本次調(diào)用drawCanvas繪制的內(nèi)容覆蓋在上面，默
  *        認(rèn) false
  */
Page({
    data:{
      startX:0,//開始X坐標(biāo)
      startY:0,//開始Y坐標(biāo)
      moveX:0, //移動X坐標(biāo)
      moveY:0, //移動Y坐標(biāo)
      endX:0,  //結(jié)束X坐標(biāo)
      endY:0   //結(jié)束Y坐標(biāo)
    },
    //手指觸摸開始
    canvasStart:function(e){
        var that = this;
        console.log(e)
        //將起始坐標(biāo)傳遞給變量
        that.setData({
          startX:e.touches[0].x,
          startY:e.touches[0].y
        });
    },
    //手指觸摸移動
    canvasMove:function(e){
        var that = this;
        console.log(e)
        //將移動記錄坐標(biāo)傳遞給變量
        that.setData({
          moveX:e.touches[0].x,
          moveY:e.touches[0].y
        });
        //定義context存儲繪畫動作上下文
        // var context = wx.createContext();
        // //設(shè)置直線寬度
        // context.setLineWidth(4);
        // //直線起點(diǎn)
        // context.lineTo(that.data.startX,that.data.startY);
        // //直線終點(diǎn)
        // context.lineTo(that.data.moveX,that.data.moveY);
        // //設(shè)置描邊
        //  context.stroke();
        //   wx.drawCanvas({
        //     canvasId: '1',
        //     actions: context.getActions(),
        //     reserve:false
        //   })      
    },
    //手指觸摸結(jié)束
    canvasEnd:function(e){
        console.log(e)
         var that = this;
        console.log(e)
        //將移動記錄坐標(biāo)傳遞給變量
        that.setData({
          endX:e.changedTouches[0].x,
          endY:e.changedTouches[0].y
        });
        //定義context存儲繪畫動作上下文
        var context = wx.createContext();
        //設(shè)置直線寬度
        context.setLineWidth(4);
        //直線起點(diǎn)
        context.lineTo(that.data.startX,that.data.startY);
        //直線終點(diǎn)
        context.lineTo(that.data.endX,that.data.endY);
        //設(shè)置描邊
         context.stroke();
          wx.drawCanvas({
            canvasId: '1',
            actions: context.getActions(),
            reserve:true
          })      
    },  
})