鍍金池/ 問答/HTML5  HTML/ Canvas半圓進度條效果？求指教...在線急等

Canvas半圓進度條效果？求指教...在線急等

已解決、、、謝謝關注

回答
編輯回答
久舊酒

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
        }
      );
2017年9月26日 06:06
編輯回答