要实现的效果如下：

实现逻辑是：

1、先画虚部

    - 画上虚线

    - 画下虚线

    - 画中虚线

    - 画半透明圆

2、然后画实部

    - 画上实线

    - 画下实线

    - 画纯色圆

目前遇到的问题是，我先把所有的部分实线完，然后统一执行ctx.draw()绘制总会出现各种问题：

// 默认样式       ctx.setLineWidth(1);       ctx.setFillStyle('rgba(250, 235, 215, 1)');         // 虚部       ctx.setLineDash(dash);       ctx.setStrokeStyle(`rgba(${lineRGB}, ${opacity})`);       canvas.drawSmoothPath(ctx, hPoints.slice(0, 2));       canvas.drawSmoothPath(ctx, lPoints.slice(0, 2));       ctx.setLineDash([2, 2]);       canvas.drawLine(ctx, [hPoints[idx], lPoints[idx]]);        ctx.setLineDash([1, 0]);       canvas.drawCircle(ctx, circles.slice(0, 2));         // 实部       ctx.setLineDash([1, 0]);       ctx.setStrokeStyle(`rgba(${lineRGB}, 1)`);       canvas.drawSmoothPath(ctx, hPoints.slice(1));       canvas.drawSmoothPath(ctx, lPoints.slice(1));       canvas.drawCircle(ctx, circles.slice(2));         ctx.draw(true, () => {         canvas.toImage(ctx, CANVAS_ID, that).then(path => {           that.setData({             canvasToImg: path           });           utils.clearAndSaveImage(IMG_KEY, path);         });       })

是不是不能统一的执行draw操作，需要每执行完一步都执行draw然后在执行下一步？

类似：

画上虚线 -> draw

画下虚线 -> draw

画中虚线 -> draw

画半透明圆 -> draw

画上实线 -> draw

画下实线 -> draw

画纯色圆 -> draw

这样操作的话是不是性能不太好啊？