Canvas_圆环进度条_canvas 2个圈圈进度条-CSDN博客

本文链接：https://blog.csdn.net/qq_41629150/article/details/102678844

本文介绍如何使用React和Canvas API创建一个动态更新的进度条，包括最外层圆环、内层浅蓝色圆环和深色进度条圆环，以及中心进度文字的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 源代码

import React from 'react';
export default class Index extends React.Component {
  componentDidMount() {
    let x = 45; // 动态变动的进度值
    let ctx = this.refs.canvas.getContext('2d');
    // 最外层圆环
    ctx.beginPath();
    ctx.lineWidth = 5; 
    ctx.strokeStyle = '#F0F8FF';
    ctx.arc(100, 100, 90, 0, 2 * Math.PI);
    ctx.restore();
    ctx.stroke();
    // 内层浅蓝色圆环
    ctx.beginPath();
    ctx.lineWidth = 5; 
    ctx.strokeStyle = '#87CEFA';
    ctx.arc(100, 100, 80, 0, 2 * Math.PI);
    ctx.restore();
    ctx.stroke();
    // 深色进度条圆环
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#1E90FF';
    ctx.arc(100, 100, 80, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
    ctx.stroke();
    // 中心进度文字
    ctx.font = '40px Arial';
    ctx.fillStyle = '#1E90FF'; // 文字颜色
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'center';
    ctx.fillText(`${x.toFixed(2)}%`, 100, 100);
  }
  render() {
    return (
      <div>
        app.js
        <canvas ref="canvas" width="400" height="400"></canvas>
      </div>
    );
  }
};