source/圆角环形图/index.html

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="full-screen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="圆角环形" name="keywords" />
    <meta content="圆角环形" name="description" />
    <title>圆角环形</title>
    <script type="text/javascript" src="cricleRoundring.js"></script>
  </head>

  <body>
    <canvas id="canvas" width="250px" height="250px"></canvas>

    <script type="text/javascript">
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var ring = new Ring(
        "80",
        "25",
        "#ccc",
        ["#a1b91d", "#e9636a", "#e7ba21"],
        "round"
      );
      ring.drawRing(ctx, (2 * Math.PI) / 3, [20, 50, 30], 125, 125);
    </script>

    <div id="cli_dialog_div"></div>
  </body>
</html>