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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Juniorselk/article/details/78492145

第一次用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');