Canvas 画箭头

var myCanvas, my_canvas;

Page({

  /**
   * 页面的初始数据
   */
  data: {

    sx:'',
    sy:'',
    ex:'',
    ey:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    myCanvas = wx.createCanvasContext("myCanvas", this);
    my_canvas = wx.createCanvasContext("my_canvas", this)

  },

  //触摸开始
  start: function(e) {
       console.log("开始位置的坐标", e.touches.length);
    // console.log("开始位置的坐标", e.touches[0].x, e.touches[0].y)
    myCanvas = wx.createCanvasContext("myCanvas", this);
    this.setData({
      startX: e.touches[0].x,
      startY: e.touches[0].y
    })
  },
  //改变位置
  move: function(e) {
    // console.log(e)
    this.setData({
      endx: e.changedTouches[0].x,
      endy: e.changedTouches[0].y
    })
  },
  //结束的位置
  end: function(e) {
    // // // console.log("结束的位置的坐标",e)
    // console.log("结束的位置的坐标", e.changedTouches[0].x, e.changedTouches[0].y);
    this.setData({
      endx: e.changedTouches[0].x,
      endy: e.changedTouches[0].y
    })
    myCanvas.moveTo(this.data.startX, this.data.startY);
    myCanvas.lineTo(this.data.endx, this.data.endy);
    myCanvas.setStrokeStyle(this.data.color ? this.data.color : "#000000");
    var angle = Math.atan2(this.data.startY - this.data.endy, this.data.startX - this.data.endx) * 180 / Math.PI,
     angle1 = (angle + 30) * Math.PI / 180,
     angle2 = (angle - 30) * Math.PI / 180,
     topX = 10 * Math.cos(angle1),
     topY = 10 * Math.sin(angle1),
     botX = 10 * Math.cos(angle2),
     botY = 10 * Math.sin(angle2),

     arrowX = this.data.endx - topX,
     arrowY = this.data.endy - topY;

    myCanvas.moveTo(arrowX, arrowY);
    myCanvas.moveTo(this.data.startX, this.data.startY);
    myCanvas.lineTo(this.data.endx, this.data.endy);
    arrowX = this.data.endx + topX;
    arrowY = this.data.endy + topY;
    myCanvas.moveTo(arrowX, arrowY);
    myCanvas.lineTo(this.data.endx, this.data.endy);
    arrowX = this.data.endx + botX;
    arrowY = this.data.endy + botY;
    myCanvas.lineTo(arrowX, arrowY);
    myCanvas.setLineWidth(3);
    myCanvas.stroke();


    myCanvas.draw(true);

})