如果对您有帮助，请关注我，加入微信小程序开发交流qq群（173683895）相互交流学习。谢谢

微信小程序画布 先上效果图：

wxml

<!--pages/test2/test.wxml-->
<canvas class='myCanvas' canvas-id="myCanvas" bindtouchstart='EventHandleStart' bindtouchend='EventHandle' style="border: 1px solid;" />
<view class='list_btn'>
  <view bindtap='fc_line'>直线</view>
  <!-- <view bindtap='fc_rect'>矩形</view> -->
  <view bindtap='fc_oval'>椭圆</view>
  <view bindtap='fc_break_line'>虚线</view>
  <view bindtap='fc_revocation'>撤销</view>
  <view bindtap='fc_go'>前进</view>
  <view bindtap='fc_canvas_file'>保存</view>
  <view bindtap='submit'>提交</view>
  <view bindtap='out'>退出</view>
  <view bindtap='enter'>输入</view>
</view>
<block wx:if='{{show_input}}'>
<view class='input_top'>
<form  bindsubmit='formsubmit'>
  <input class='input' id='{{input_id}}' name='{{input_name}}' placeholder='请输入您的描述'></input>
  <input class='input_submit' formType="submit" value='提交' disabled></input>
  </form>
  </view>
</block>

js

var strat_x, strat_y, ent_x, ent_y, beginPath;
var ctx = wx.createCanvasContext('myCanvas');
Page({
  data: { 
    if_shape:'is_line',
    arr_tempFilePath:[],
    show_input:false
  },
  // 鼠标结束触摸事件
  EventHandle: function (event) {
    var that =this;
    ent_x = event.changedTouches[0].x;
    ent_y = event.changedTouches[0].y;
    switch (this.data.if_shape) {
      case 'is_line':
        ctx.beginPath();
        ctx.setLineDash(); //取消虚线
        ctx.moveTo(strat_x, strat_y); // 设置路径起点坐标
        ctx.lineTo(ent_x, ent_y); // 绘制一条直线
        break;
      case 'is_oval':
        ctx.beginPath();
        ctx.setLineDash();//取消虚线
        ctx.moveTo(strat_x, strat_y);  //创建一个起点
        ctx.arcTo(ent_x, strat_y, ent_x, ent_y, 25);   // 创建一个弧
        ctx.arcTo(strat_x, ent_y, strat_x, strat_y, 25);   // 创建一个弧
        break;
      case 'is_break_line':
        ctx.beginPath();
        ctx.moveTo(strat_x, strat_y); // 设置路径起点坐标
        ctx.lineTo(ent_x, ent_y); // 绘制一条直线
        ctx.setLineDash([10, 5], 5);
        break;
    }
    ctx.stroke();//画出当前路径的边框。默认颜色色为黑色。
    ctx.draw(true,function(res){
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: that.data.img_Width,
        height: that.data.img_Height,
        canvasId: 'myCanvas',
        success: function (res) {
          var imgPath = res.tempFilePath;
          var allDrawWorksPath = that.data.arr_tempFilePath;
          allDrawWorksPath.push(imgPath);
          console.log(allDrawWorksPath)
          that.setData({
            arr_tempFilePath: allDrawWorksPath
          })
        }
      })
    });
    ctx.save()  //保存之前的样式
    // ctx.restore(); //保存save保存的样式，save和restore之间的对restore下面的无效
    for (var i = 0; i < ctx.drawingState.length; i++) {
      ctx.drawingState[i].id = ctx.drawingState.length    //drawingState 当前上下文的路径
    }
    that.setData({
      save_ctx: ctx
    })
  },
  // 撤销
  fc_revocation: function () {
    console.log('撤销')
    // arr_tempFilePath所有画布路径
    var arr_tempFilePath = this.data.arr_tempFilePath;
    if (arr_tempFilePath == null || arr_tempFilePath.length == 0 || arr_tempFilePath == undefined) {
      return;
    }
    //  privWorksPath 撤销掉的画布的路径
    var privWorksPath = arr_tempFilePath.pop();
    console.log(privWorksPath)
    console.log(arr_tempFilePath)
    this.setData({
      arr_tempFilePath: arr_tempFilePath,
      privWorksPath: privWorksPath
    })
    for (var i = 0; i < arr_tempFilePath.length;i++){
      var path = arr_tempFilePath[i]
    }
    ctx.drawImage(path, 0, 0, this.data.img_Width, this.data.img_Height);

    ctx.draw();
  },
  //  前进
  fc_go: function () {
    var privWorksPath = this.data.privWorksPath;
    ctx.drawImage(privWorksPath, 0, 0, this.data.img_Width, this.data.img_Height);
    ctx.draw()
    this.setData({
      arr_tempFilePath: this.data.arr_tempFilePath.concat(privWorksPath)
    })
  },
  // 矩形
  rect:function(){
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setStrokeStyle('red')
    ctx.strokeRect(10, 10, 150, 75)
    ctx.draw()
  },
  // 鼠标触摸事件
  EventHandleStart: function (event) {
    strat_x = event.touches[0].x;
    strat_y = event.touches[0].y;
  },
  //  选择直线
  fc_line: function () {
    this.setData({
      if_shape: 'is_line'
    })
  },
  //  选择椭圆
  fc_oval: function () {
    this.setData({
      if_shape: 'is_oval'
    })
  },
  //  选择波浪线
  fc_break_line: function () {
    this.setData({
      if_shape: 'is_break_line'
    })
  },
  // 保存画布与图片
  fc_canvas_file: function () {
    var that = this;
    wx.canvasToTempFilePath({
      width: that.data.img_Width,
      height: that.data.img_Height,
      destWidth: that.data.img_Width,
      destHeight: that.data.img_Height,
      canvasId: 'myCanvas',
      success: function (res) {
        console.log(res.tempFilePath)  // 返回图片路径
        // 保存图片
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
        })
      }
    })
  }, 
  // 提交
  submit:function(){
    var that = this;
    wx.canvasToTempFilePath({
      width: that.data.img_Width,
      height: that.data.img_Height,
      destWidth: that.data.img_Width,
      destHeight: that.data.img_Height,
      canvasId: 'myCanvas',
      success: function (res) {
        console.log(res.tempFilePath)  // 返回图片路径
        wx.showToast({
          title: '提交成功',
        })
        // 提交
        wx.request({
          url: 'test.php', //仅为示例，并非真实的接口地址
          data: {
            x: '',
            y: ''
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)
          }
        })
      }
    })
  },
  // 退出
  out:function(){
    wx.showModal({
      title: '温馨提示',
      content: '您确认退出吗？',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          wx.navigateTo({
            url: '../logs/logs',
            success: function(res) {},
            fail: function(res) {},
            complete: function(res) {},
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  // 输入
  enter:function(){
    var that =this;
    that.setData({
        show_input:true
    })
  },
  formsubmit:function(e){
    console.log(e)

  },
  onLoad: function () {
    var that = this;
    var query = wx.createSelectorQuery();
    //选择id
    query.select('.myCanvas').boundingClientRect()
    query.exec(function (res) {
      that.setData({
        img_Width: res[0].width,
        img_Height: res[0].height
      })
      //res就是 该元素的信息 数组
      ctx.drawImage('/image/txt.jpg', 0, 0, res[0].width, res[0].height)
      ctx.draw()
    })
  },
  onShow:function(){
    console.log('onShow')
  },
  onReady: function (e) {
    ctx.setLineWidth(2); // 设置线宽
    ctx.setStrokeStyle('red')
  }
})

wxss

/* pages/test2/test.wxss */
page{
  height: 100%;
  margin: 0 auto;
  padding: 0 auto
}
 .myCanvas{
  position: absolute;
  right: 0;
  width: 80%;
  border: 1px solid #000;
  z-index: 2;
  height: 100%
} 
.list_btn{
  position: absolute;
  left: 0;
  width: 20%;
  border: 1px solid #000;
  height: 100%
}
.list_btn view{
 margin: 30rpx 0 auto;
  border: 1px solid #000;
 text-align: center;
}
.input_top{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  padding: 20rpx;
  background: sandybrown
}
.input{
  border: 1px solid #d0d0d0;
  width: 80%;
}
.input_submit{
  position: absolute;
  right: 20rpx;
  bottom: 30rpx;
  width: 120rpx;
  background: white;
}