canvas draw问题求解
发布于 7 年前 作者 gchen 1918 次浏览 来自 问答

要实现的效果如下：

实现逻辑是：

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

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

1 回复

你大概是需要 beginPath

回到顶部