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

最新推荐文章于 2024-05-23 19:04:14 发布

qq_45163099

最新推荐文章于 2024-05-23 19:04:14 发布

阅读量755

点赞数

文章标签：前端 javascript react.js

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

版权

实现的效果如图所示：

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();
    //