react 中 使用canvas 实现圆角圆环

本文介绍如何在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>
    )
  }
}

效果图:
这里写图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值