之前用css画了环形图，但是进度条不能为圆角，和设计图有一点点不一样。现在有点时间，打算用canvas画个圆角的环形图。
在用canvas画环形图的时候，思考比较久的是进度条百分比这一块。
关键点是知道Math.PI 返回的是什么。PI就是圆周率π，PI是弧度制的π,也就是180°。所以，Math.PI ≈ 3.14 = 180°
把下面的PI换成180°，一切就很简单了。（一开始没反应过来竟是小学内容。。。犹豫了一下才反应过来）
效果图
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的代码就可以了。
