要实现的效果如下：






实现逻辑是：



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


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

微信小程序开发问题解答