wxml:

<canvas canvas-id="canvas1"></canvas>

wxss:

  canvas{
        width:708px;
        height:760rpx;
    }

js:

var context = wx.createContext()//创建并返回绘图上下文context对象
    context.setStrokeStyle("#cccccc")//设置线条的颜色
    context.setLineWidth(1)//设置线条宽度
    function drawDashLine(ctx, x1, y1, x2, y2, dashLength){  //传context对象，始点x和y坐标，终点x和y坐标，虚线长度
      var dashLen = dashLength === undefined ? 3 : dashLength,
      xpos = x2 - x1, //得到横向的宽度;
      ypos = y2 - y1, //得到纵向的高度;
      numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen); 
      //利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
      for(var i=0; i<numDashes; i++){
         if(i % 2 === 0){
             ctx.moveTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i); 
             //有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
          }else{
              ctx.lineTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i);
          }
       }
      ctx.stroke();
    }
    drawDashLine(context, 0, 95, 364, 95, 5);//横向虚线
    drawDashLine(context, 0, 190, 364, 190, 5);//横向虚线
    drawDashLine(context, 0, 285, 364, 285, 5);//横向虚线
    drawDashLine(context, 91, 0, 91, 400, 5);//纵向虚线
    drawDashLine(context, 182, 0, 182, 400, 5);//纵向虚线
    drawDashLine(context, 273, 0, 273, 400, 5);//纵向虚线
    //微信小程序画图
    wx.drawCanvas({
      canvasId: 'canvas1',
      actions: context.getActions()
    });

效果图：

感谢杨同事的分享--转载来源公司知识共享库