收藏
回答

canvas draw问题求解

要实现的效果如下:




实现逻辑是:


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


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

最后一次编辑于  2018-11-24  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 卢霄霄
    卢霄霄
    2018-11-24

    你大概是需要 beginPath

    2018-11-24
    赞同
    回复 1
    • 杨小胖
      杨小胖
      2018-11-24

      感谢指出啊,本来以为我自己的canvas脚本里每个方法都写了beginPath,刚才一看,确实只有一个方法写了,其他漏掉了

      2018-11-24
      回复