Javascript 在React中实现HTML5画布渐变

我正在尝试创建一个应用程序，它可以让你用两种不同的颜色创建一个背景渐变，我正在使用React。渐变的第一种颜色看起来应该是这样的，但是渐变的第二种颜色更像是纯色，带有锯齿状的边框。这里有一张图片展示：

我的目标是得到与此更接近的东西：

颜色混合的地方

我指的是文档，把半径和x，y属性弄得一团糟。我正在根据父组件的道具更改更改画布，下面是我的代码：

import React, { Component } from "react";

class Canvas extends Component {
  componentDidMount() {
    const { gradientOne, gradientTwo } = this.props.canvasState.backgroundColor;
    this.ctx = this.canvas.getContext("2d");
    this.radialGradient = this.ctx.createRadialGradient(
      0,
      0,
      300,
      260,
      160,
      100
    );

    this.ctx.fillStyle = this.radialGradient;
    this.ctx.rect(0, 0, this.canvas.width, this.canvas.height);
    this.radialGradient.addColorStop(0, gradientOne);
    this.radialGradient.addColorStop(1, gradientTwo);
    this.ctx.fill();
  }

  componentDidUpdate(prevProps, prevState) {
    const { gradientOne, gradientTwo } = this.props.canvasState.backgroundColor;
    if (prevProps.canvasState.backgroundColor.gradientOne !== gradientOne) {
      this.ctx.fillStyle = this.radialGradient;
      this.radialGradient.addColorStop(0, gradientOne);
      this.ctx.fill();
    } else if (
      prevProps.canvasState.backgroundColor.gradientTwo !== gradientTwo
    ) {
      this.ctx.fillStyle = this.radialGradient;
      this.radialGradient.addColorStop(1, gradientTwo);
      this.ctx.fill();
    }
  }
  render() {
    return (
      <main className="canvasContainer">
        <canvas ref={ref => (this.canvas = ref)} id="canvas">
          YOUR BROWSER DOESN'T SUPPORT THIS FEATURE :(
        </canvas>
      </main>
    );
  }
}

export default Canvas;

import React，{Component}来自“React”；
类画布扩展组件{
componentDidMount（）{
const{gradientOne，gradientTwo}=this.props.canvasState.backgroundColor；
this.ctx=this.canvas.getContext（“2d”）；
this.radialGradient=this.ctx.createRadialGradient(
0,
0,
300,
260,
160,
100
);
this.ctx.fillStyle=this.radialGradient；
this.ctx.rect（0，0，this.canvas.width，this.canvas.height）；
这个.radialGradient.addColorStop（0，gradientOne）；
这个.radialGradient.addColorStop（1，gradientTwo）；
这个.ctx.fill（）；
}
componentDidUpdate（prevProps、prevState）{
const{gradientOne，gradientTwo}=this.props.canvasState.backgroundColor；
如果（prevProps.canvasState.backgroundColor.gradientOne！==gradientOne）{
this.ctx.fillStyle=this.radialGradient；
这个.radialGradient.addColorStop（0，gradientOne）；
这个.ctx.fill（）；
}否则如果(
prevProps.canvasState.backgroundColor.gradientTwo！==gradientTwo
) {
this.ctx.fillStyle=this.radialGradient；
这个.radialGradient.addColorStop（1，gradientTwo）；
这个.ctx.fill（）；
}
}
render（）{
返回(
（this.canvas=ref）}id=“canvas”>
您的浏览器不支持此功能：(
);
}
}
导出默认画布；

---

感谢您的帮助！

画布渐变的颜色停止点（无论是线性还是径向）无法修改或删除。
当你在与前一个相同的索引处添加一个新的颜色停止点时，它会被放置在前一个颜色停止点的正后方。因此，不是只有两个颜色停止点，而是有四个颜色停止点

这意味着如果你有一个像这样的原始梯度

 <-red -------------------------------------------- green->

也就是说，红色和蓝色之间没有梯度，黄色和绿色之间也没有梯度：

const ctx=canvas.getContext（'2d'）；
ctx.strokeStyle=‘白色’；
//水平梯度
//0位于x轴上的像素50处，1位于像素250处
常数梯度=ctx.createLinearGradient（50,0250,0）；
渐变添加颜色停止（0，'红色'）；
渐变添加颜色停止（1，“绿色”）；
ctx.fillStyle=梯度；
//顶部是两个颜色停止版本
ctx.fillRect（0,0300,70）；
//底部是四色版
渐变添加颜色停止（0，'蓝色'）；
渐变添加颜色停止（1，'黄色'）；
ctx.fillStyle=梯度；
ctx.fillRect（0,80300,70）；
//标记颜色停止
ctx.moveTo（49.5,0）；
ctx.lineTo（49.5150）；
ctx.moveTo（249.5,0）；
ctx.lineTo（249.5150）；
ctx.stroke（）；

canvas{border:1px solid}；

 <-red[blue -------------------------------- green]yellow->