小程序-canvas涂鸦

wxml代码

<canvas
  canvas-id='myCanvas'
  class='myCanvas'
  disable-scroll='false'
  bindtouchstart='touchStart'
  bindtouchmove='touchMove'
></canvas>

js代码

Page({
  data: {
    startX:0,
    startY:0
  },
  onLoad() {
    this.ctx = wx.createCanvasContext('myCanvas') //创建 canvas 的绘图上下文CanvasContext对象
  },
  touchStart(e){
    this.startX = e.changedTouches[0].x 
    this.startY = e.changedTouches[0].y//获取点击开始时的坐标
    this.ctx.setStrokeStyle("#000");//设置线的颜色
    this.ctx.setLineCap('round') //设置线两端的样式
    this.ctx.setLineWidth(20)//设置线的宽度
    this.ctx.beginPath()//开始画
  },
  touchMove(e){
    let startX1 = e.changedTouches[0].x
    let startY1 = e.changedTouches[0].y//记录移动的坐标
    this.ctx.moveTo(this.startX, this.startY)//开始的坐标
    this.ctx.lineTo(startX1, startY1)//移动的坐标
    this.ctx.stroke()//画出当前路径
    this.startX = startX1;
    this.startY = startY1;//把移动的坐标赋值给开始坐标
    wx.drawCanvas({
      canvasId: 'myCanvas',
      reserve: true,
      actions: this.ctx.getActions() // 获取绘图动作数组
    })
  }
})