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

本文详细介绍了如何在React应用中使用canvas元素创建一个具有渐变效果的圆环,通过JavaScript实现动态变化的颜色过渡,展示了前端开发中canvas图形绘制的技巧。

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

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(Percentage)
        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: 560,// 画布宽度
        canvasheight: 560,// 画布高度
        x0: 180,
        y0: 180,
        r: 111,
        lineWidth: 70,
        strokeStyle: 'rgba(248, 248, 248, 1)',
        LinearGradientColor1: '#3EECED',
        LinearGradientColor2: '#499BE6',
        Percentage:1,
      }
    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>
    )
    }
};

export default Home;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值