用canvas画一个进度条为圆角的环形图（圆环图）

之前用css画了环形图，但是进度条不能为圆角，和设计图有一点点不一样。现在有点时间，打算用canvas画个圆角的环形图。

在用canvas画环形图的时候，思考比较久的是进度条百分比这一块。
关键点是知道Math.PI 返回的是什么。PI就是圆周率π，PI是弧度制的π,也就是180°。所以，Math.PI ≈ 3.14 = 180°
把下面的PI换成180°，一切就很简单了。（一开始没反应过来竟是小学内容。。。犹豫了一下才反应过来）

demo

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

//百分比
let percent=0.7;
function App() {
  useEffect(() => {
    const ctx = document.getElementById("myCanvas").getContext("2d");
    //外圆环
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    ctx.strokeStyle = "#fff";
    ctx.fillStyle = "#EDEDED";
    ctx.fill();
    ctx.stroke();
    //内圆环
    ctx.beginPath();
    ctx.arc(100, 100, 40, 0, 2 * Math.PI);
    ctx.strokeStyle = "#fff";
    ctx.fillStyle = "#fff";
    ctx.fill();
    ctx.stroke();
    //环形图的进度条
    ctx.beginPath();
    ctx.arc( 100,100, 44, -Math.PI / 2,-Math.PI / 2 + percent * (Math.PI * 2),false);
    ctx.lineWidth = 8;
    ctx.lineCap = "round";
    ctx.strokeStyle = "rgb(255, 127, 105)";
    ctx.stroke();
  });

  return (
    <div style={{textAlign: 'center',marginTop: '30%'}}>
      <canvas id="myCanvas" width="200" height="200" style={{border: "1px solid #000000" }}/>
   </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

上面的代码，我在谷歌上运行，和在codesandbox中运行的结果不太一样。
发现在谷歌上运行的时候，画外圆环和内圆环的线条宽度受到了画进度条时设置的lineWidth线条宽度的影响。所以在画外圆环和内圆环时，加一行ctx.lineWidth = 1的代码就可以了。