React中Canvas绘制图形时，为什么每次渲染都会重复叠加？

这个问题其实是React组件的生命周期和Canvas绘图机制结合时的一个常见坑。下面我来一步步帮你搞定。

### 问题原因
React每次重新渲染组件时，componentDidUpdate方法会被调用，你在里面又画了一个矩形。但问题是，Canvas不会自动清空之前的内容，所以新画的图形就会直接叠加在旧的上面。

你提到试过clearRect但没起作用，可能是因为使用位置不对或者清屏范围有问题。接下来我教你正确的写法。

---

### 解决方案
我们需要在每次绘制前，先清空整个Canvas区域。具体步骤如下：

1. **获取Canvas上下文**：这个你已经做对了，通过getContext('2d')拿到绘图上下文。
2. **清空Canvas**：在绘制新图形前，调用clearRect(x, y, width, height)方法，指定清空的范围为整个Canvas大小。
3. **绘制新图形**：清屏后再进行你的绘图操作。

---

### 修改后的代码
下面是完整的代码示例，注释里详细说明每一步的作用：

class DrawCanvas extends React.Component {

  // 组件挂载时初始化第一个蓝色矩形

  componentDidMount() {

    const ctx = this.canvas.getContext('2d');

    // 先清空Canvas（虽然这里第一次不需要清屏，但保持统一逻辑）

    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

    ctx.fillStyle = 'blue';

    ctx.fillRect(10, 10, 50, 50); // 绘制蓝色矩形

  }



  componentDidUpdate() {

    const ctx = this.canvas.getContext('2d');

    // 每次更新状态时，先清空整个Canvas

    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);



    // 然后绘制新的红色矩形

    ctx.fillStyle = 'red';

    ctx.fillRect(70, 70, 50, 50);

  }



  render() {

    return (

      <canvas ref={canvas => (this.canvas = canvas)} width="200" height="200"></canvas>

    );

  }

}

---

### 关键点解释

1. **为什么需要clearRect？**
- Canvas本质上是一个位图画布，绘制的内容会一直保留，除非你手动清除。所以每次重新绘制时，必须先清屏。

2. **clearRect的参数是什么意思？**
- ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)表示从左上角(0, 0)开始，清除一个宽度为this.canvas.width、高度为this.canvas.height的矩形区域。这样就清空了整个Canvas。

3. **为什么不把绘图逻辑放在render里？**
- React的render方法是用来返回DOM结构的，而不是用来处理副作用（比如Canvas绘图）。所以我们要用componentDidMount和componentDidUpdate这样的生命周期方法来处理绘图逻辑。

4. **关于ref的用法**
- 在React中获取原生DOM节点，推荐使用ref而不是直接操作document.getElementById之类的。这里ref={canvas => (this.canvas = canvas)}就是用来保存Canvas DOM节点的引用。

---

### 测试一下
按照上面的代码修改后，每次状态更新时，Canvas都会先清空再绘制新的红色矩形，旧的蓝色矩形也不会再保留了。

如果还有其他疑问，随时问我！

你这个问题挺常见的，Canvas叠加是因为没有清空画布就直接绘制新图形了。优化一下代码，每次绘制前先用 clearRect 把画布清空就行。

关键是 clearRect 的用法要正确，它的参数是 (x, y, width, height)，表示清除的矩形区域。你需要根据Canvas大小来设置这个区域。

修改后的代码如下：

class DrawCanvas extends React.Component {

  componentDidMount() {

    const ctx = this.canvas.getContext('2d');

    ctx.fillStyle = 'blue';

    ctx.fillRect(10, 10, 50, 50);

  }



  componentDidUpdate() {

    const ctx = this.canvas.getContext('2d');



    // 清空整个画布

    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);



    ctx.fillStyle = 'red';

    ctx.fillRect(70, 70, 50, 50); // 每次状态更新都添加新矩形

  }



  render() {

    return <canvas ref={canvas => (this.canvas = canvas)} width="200" height="200" />;

  }

}

注意两点：
1. 在 componentDidUpdate 中调用 clearRect，清空范围是整个画布大小。
2. 确保你的Canvas尺寸正确，this.canvas.width 和 this.canvas.height 要匹配实际渲染尺寸。

这样每次更新状态时，旧的图形会被清空，只保留最新的绘制内容。性能上也更优，因为避免了不必要的叠加。