微信小程序canvas画布自由绘制/画笔功能实现

.wxml

<canvas class="canvas" type="2d" id="myCanvas" bindtouchstart="update_edit_position" bindtouchmove="brush"/>

.wxss

定义画布显示样式

.canvas{
  background-color: white;
  height: 65vh;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;  
}

.js

data:{
    edit_brush:{},
}，
onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
    .fields({ node: true, size: true })
    .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        this.setData({
            canvas: canvas
            ctx: ctx
        })
    })
},

//触摸开始更新初始位置
get_edit_position(e){
    va