canvas

wxml

 <canvas type="2d" id="myCanvas" style="height:1300rpx;width:710rpx;position: fixed;top:20rpx;left:20rpx;box-sizing: border-box;z-index:3"  v-show="canvasShow"></canvas>

js
第一步：获取画布

        const query = wx.createSelectorQuery()
        query.select('#myCanvas')
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvas = res[0].node
            var ctx = canvas.getContext('2d')
            canvas.width = 710  
            canvas.height = 1300
            canvas.x = 0
            canvas.y = 0
          })

第二步：开始画图

1、画圆

// 开始绘制路径
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
// 绘制圆的路径**
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);

// 0°是从三点钟方向开始的

// 描边路径
ctx.stroke();

2