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

之前用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 (

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(, rootElement);

上面的代码，我在谷歌上运行，和在codesandbox中运行的结果不太一样。

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