本來今天想做登陸的，結果安全域名設置這個月用沒了，只能下個月做嘍，于是心血來潮玩了一下canvas終于有點門道了，暫且做個備忘，大家也給指點一下。本來今天想做登陸的，結果安全域名設置這個月用沒了，只能下個月做嘍，于是心血來潮玩了一下canvas終于有點門道了，暫且做個備忘，大家也給指點一下。

先展示一下效果

wxml 代碼

<button >直線</button>

<canvas style="border:1px solid; width:99%;"  bindtouchstart="canvasBindStart" bindtouchmove="canvasBindMove" canvas-id="1"/>

js 代碼

Page({
  data:{
    startX:0,
    startY:0,
    endX:0,
    endY:0
  },
    //綁定出沒開始事件，記錄起點
   canvasBindStart:function(e){
    var that = this;
    console.log(e);
    that.setData({
      startX:e.touches[0].x,//重點touches后邊一定要加索引[0],不然讀取不到坐標
      startY:e.touches[0].y//重點touches后邊一定要加索引[0],不然讀取不到坐標

    });

  },

  //綁定移動事件，并將坐標傳遞作為終點
  canvasBindMove:function(e){
    var that = this;
    that.setData({
      endX:e.touches[0].x,//重點touches后邊一定要加索引[0],不然讀取不到坐標
      endY:e.touches[0].y,//重點touches后邊一定要加索引[0],不然讀取不到坐標

    });
    console.log(e.touches[0].x);//重點touches后邊一定要加索引[0],不然讀取不到坐標
    //記錄上下文
    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()
    });
  },


})