微信小程序 画图 canvas

 <canvas canvas-id="myCanvas" class="canvasBox" bindtouchstart="start" bindtouchmove="move"></canvas>


.canvasBox {
  width: 100%;
  height: calc(100vh - 520rpx);
  background-color: #fff;
  border-radius: 14rpx;
}

var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    x: 0,  //开始的位置
    y: 0,
    newx: 0,   //移动的位置
    newy: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this._canvasInit();
  },
  _canvasInit() {
    var ctx = wx.createCanvasContext('myCanvas');
    this.ctx = ctx
  },
  //触摸开始
  start(e) {
    this._starTimer(10)
    let startx = e.changedTouches[0].x;
    let starty = e.changedTouches[0].y;
    this.setData({
      x: startx,
      y: starty
    })
  },
  //触摸移动
  move(e) {
    let movex = e.changedTouches[0].x;
    let movey = e.changedTouches[0].y;
    this.setData({
      newx: movex,
      newy: movey
    })
    this._drawingLine(this.data.x, this.data.y, this.data.newx, this.data.newy)
    this.setData({
      x: movex,
      y: movey
    })
  },
  // 画线方法
  _drawingLine(startx, starty, movex, movey) {
    this.ctx.beginPath()   //开始定义路径

    //this.ctx.setLineWidth(10)   //设置线条的宽度
    this.ctx.strokeStyle = "rgba(255,0,0,1)"   //修改边框颜色
    //this.ctx.setGlobalAlpha(0.2)   //设置全局画笔透明度  范围 0-1，0 表示完全透明，1 表示完全不透明

    //文本
    //this.ctx.setFontSize(20)   //设置字体的字号
    // this.ctx.setFillStyle('blue')   //设置填充色
    //this.ctx.fillText('Hello', 0, 150)   //在画布上输出的文本   内容  x   y


    this.ctx.moveTo(startx, starty)   //起始点
    this.ctx.lineTo(movex, movey)     //连接到的坐标点
    this.ctx.stroke()     //沿着绘制的坐标点路径绘制直线
    this.ctx.draw(true)    //将之前在绘图上下文中画到 canvas 中
  },
  
})