一个基于react中 的canvas渐变效果的圆环

import React, { Component } from 'react';
import './index.scss';

class Home extends Component {
    constructor(props) {
        super(props)
      }
      initCanvas() {
        const {
          x0,//原点坐标
          y0,
          r,// 半径
          lineWidth, // 画笔宽度
          strokeStyle, //画笔颜色
          LinearGradientColor1, //起始渐变颜色
          LinearGradientColor2, //结束渐变颜色
          Percentage,// 进度百分比
        } = this.props
        let ele = document.getElementById("time_graph_canvas")
        let circle = ele.getContext("2d");
        //创建背景圆
        circle.lineWidth = lineWidth;
        circle.strokeStyle = strokeStyle;
        circle.lineCap = 'round';
        circle.beginPath();//开始一个新的路径
        circle.arc(x0, y0, r, 0, 2 * Math.PI, false);///用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        circle.stroke();//对当前路径进行描边
        //创建渐变圆环
        console.log(Perce