在reactjs中在画布上画4个圆

在ReactJS中，在画布上画4个圆可以通过以下步骤实现：

首先，创建一个React组件，命名为Canvas，用于渲染画布和圆形。

import React from 'react';

class Canvas extends React.Component {
  render() {
    return (
      <div>
        <canvas id="myCanvas" width="400" height="400"></canvas>
      </div>
    );
  }
}

export default Canvas;

在组件的生命周期方法componentDidMount中，获取画布的上下文，并使用上下文绘制4个圆形。

import React from 'react';

class Canvas extends React.Component {
  componentDidMount() {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 绘制第一个圆形
    ctx.beginPath();
    ctx.arc(50, 50, 20, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();

    // 绘制第二个圆形
    ctx.beginPath();
    ctx.arc(100, 100, 20, 0, 2 * Math.PI);
    ctx.fillStyle = 'blue';
    ctx.fill();

    // 绘制第三个圆形
    ctx.beginPath();
    ctx.arc(150, 150, 20, 0, 2 * Math.PI);
    ctx.fillStyle = 'green';
    ctx.fill();

    // 绘制第四个圆形
    ctx.beginPath();
    ctx.arc(200, 200, 20, 0, 2 * Math.PI);
    ctx.fillStyle = 'yellow';
    ctx.fill();
  }

  render() {
    return (
      <div>
        <canvas id="myCanvas" width="400" height="400"></canvas>
      </div>
    );
  }
}

export default Canvas;

在其他React组件中使用Canvas组件。

import React from 'react';
import Canvas from './Canvas';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>在ReactJS中画4个圆</h1>
        <Canvas />
      </div>
    );
  }
}

export default App;

这样，当App组件被渲染时，Canvas组件会在画布上绘制4个圆形。每个圆形的位置、颜色等可以根据需求进行调整。