react中用canvas制作渐变色的环形进度条

第一次用canvas画图，代码仅供参考；

首先创建canvas标签：

<canvas className={styles.progress} id="time_graph_canvas" width="240" height="240"></canvas>

然后在componentDidMount里执行，这里的Percentage是需要的百分比值。我定义在jsx全局，因为要在render的时候获取到百分比值。

componentDidMount() {  let ele = document.getElementById("time_graph_canvas")  let circle = ele.getContext("2d");  //创建背景圆  circle.lineWidth = 6;  circle.strokeStyle = 'rgba(0,0,0,0)';  circle.lineCap = 'round';  circle.beginPath();//开始一个新的路径  circle.arc(70, 70, 67, 0, 2 * Math.PI, false);///用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  circle.stroke();//对当前路径进行描边  //创建渐变圆环  let g = circle.createLinearGradient(32, 0, 20, 20);  //创建渐变对象  渐变开始点和渐变结束点  g.addColorStop(0, '#33e4a8'); //添加颜色点  g.addColorStop(1, '#3ea8ef');  circle.lineWidth = 6 //设置线条宽度  circle.strokeStyle = g;  circle.beginPath();//开始一个新的路径  circle.arc(70, 70, 67, -Math.PI / 2, -Math.PI / 2 + Percentage * (Math.PI * 2 / 100), false);  circle.stroke();//对当前路径进行描边}
当canvas的画布需要根据不同终端的font-size适配时，我这里获取了window的outerWidth和innerWidth，计算出缩放比后将计算好画布宽高除以2后再除以缩放比，下面是代码
let fontSizeWidth = window.outerWidth / window.innerWidth
let canvasWidth = 70 / fontSizeWidth;ele.setAttribute('width', canvasWidth + 'px');ele.setAttribute('height', canvasWidth + 'px');