Canvas半圆进度条效果？求指教...在线急等

Question

已解决、、、谢谢关注

Answer 1

https://www.cnblogs.com/jr199...

Answer 2

https://github.com/zzuzsj/ZCa...

      var outring = zcanvas.ArcShape({
        arcLine: true,
        stroke: true,
        counterClockWise: true,
        lineWidth: 24,
        // lineCap: ,
        strokeStyle: "#2a93fd",
        class: "arc_line",
        x: 356,
        y: 257,
        radius: 186,
        startAngle: Math.PI / 2 * 3,
        endAngle: Math.PI / 2 * 3
      });
      zcanvas.addNode(outring);
      zcanvas.renderNode(
        outring,
        {
          time: 30
        },
        {
          endAngle: -Math.PI / 2
        }
      );
      var inring = zcanvas.ArcShape({
        arcLine: true,
        stroke: true,
        lineWidth: 14,
        strokeStyle: "#01f5f0",
        class: "fade_out",
        x: 356,
        y: 257,
        radius: 181,
        startAngle: -Math.PI / 2,
        endAngle: -Math.PI / 2
      });
      zcanvas.addNode(inring);
      zcanvas.renderNode(
        inring,
        {
          time: 40,
          delay: 30
        },
        {
          endAngle: Math.PI / 6 * 7
        }
      );