前端(React)实现圆环百分比

最新推荐文章于 2024-03-11 10:25:13 发布

qq_45163099

最新推荐文章于 2024-03-11 10:25:13 发布

阅读量805

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/qq_45163099/article/details/127549420

版权

本文介绍了如何在前端使用React来实现圆环百分比展示，包括通过canvas绘制两个圆环叠加的方式以及利用HTML和CSS，通过右半圆与左半圆的组合与旋转来达到效果。当百分比超过50%时，调整左半圆颜色和角度，反之则调整背景色和角度。

摘要由CSDN通过智能技术生成

实现的效果如图所示：

1、使用canvas实现

canvas写的比较简单，就是两个圆环叠加。

import React, { useEffect } from 'react';

// 将canvas变量定义在组件外，否则组件更新，会将ctx重置，后面执行方法会报错
let ctx = null;
export default function index(props) {
  const { percent } = props;
  let id = `circle-${Math.random()}`;   //每次使用组件都会赋不同的id

  useEffect(() => {
    initCanvas();
    draw();
  }, []);

  useEffect(() => {
    draw();
  }, [percent]);

  // 初始化canvas
  const initCanvas = () => {
    let canvas = document.getElementById(id);
    if (canvas.getContext) {
      ctx = canvas.getContext('2d');
    }
  };
  const draw = () => {
    // 每次画图之前先清除画布
    ctx.clearRect(0, 0, 570, 570);
    ctx.beginPath();
    //