react 中使用canvas 实现圆角圆环

最新推荐文章于 2023-12-15 17:13:25 发布

原创最新推荐文章于 2023-12-15 17:13:25 发布 · 8.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #canvas

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在React应用中利用canvas绘制带有圆角的圆环组件，适用于echarts暂不支持此功能的情况。通过源码解析，展示组件的实现过程和最终效果。

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

echarts 暂时不支持圆角的圆环
下面是封装的组件源码:

import React, { Component } from 'react';

export class CanvasDemo extends React.Component {
  constructor(props) {
    super(props)
    this.initCanvas = this.initCanvas.bind(this)
  }
  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();//对当前路径进行描边
    //创建渐变圆环
    let g = circle.createLinearGradient(x0, 0, x0 + r * Math.cos(Percentage * (Math.PI * 2)), y0 + r * Math.sin(this.props.Percentage * (Math.PI * 2)));  //创建渐变对象  渐变开始点和渐变结束点
    g.addColorStop(0, LinearGradientColor1); //添加颜色点
    g.addColorStop(1, LinearGradientColor2);
    circle.lineWidth = lineWidth //设置线条宽度
    circle.lineCap = 'round';
    circle.strokeStyle = g;
    circle.beginPath();//开始一个新的路径
    circle.arc(x0, y0, r, -Math.PI / 2, -Math.PI / 2 - Percentage * (Math.PI * 2), true);
    circle.stroke();//对当前路径进行描边
  }

  componentDidMount() {
    this.initCanvas()
  }
  componentDidUpdate() {
    this.initCanvas()
  }
  static defaultProps = {
    canvaswidth: 160,// 画布宽度
    canvasheight: 160,// 画布高度
    x0: 80,
    y0: 80,
    r: 72,
    lineWidth: 16,
    strokeStyle: 'rgba(248, 248, 248, 1)',
    LinearGradientColor1: '#3EECED',
    LinearGradientColor2: '#499BE6'
  }
  render() {
    const { width, height, canvaswidth, canvasheight } = this.props
    return (
      <div style={{ width: width, height: height, padding: 10 }}>
        <canvas id="time_graph_canvas" width={canvaswidth} height={canvasheight}></canvas>
      </div>
    )
  }
}