要实现的效果如下：
实现逻辑是：
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
这样操作的话是不是性能不太好啊？
你大概是需要 beginPath
感谢指出啊，本来以为我自己的canvas脚本里每个方法都写了beginPath，刚才一看，确实只有一个方法写了，其他漏掉了