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

最新推荐文章于 2024-12-24 13:43:10 发布

原创最新推荐文章于 2024-12-24 13:43:10 发布 · 855 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #渐变 #前端 #react #js

技术专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在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;