现在需要使用react加canvas实现画方框的功能，请写一个例子出来

好的，以下是一个使用 React 和 Canvas 实现画方框的例子：

import React, { useState, useRef, useEffect } from 'react';

function BoxCanvas() {
  const canvasRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [startX, setStartX] = useState(null);
  const [startY, setStartY] = useState(null);
  const [endX, setEndX] = useState(null);
  const [endY, setEndY] = useState(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    function drawBox() {
      if (isDrawing) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.rect(startX, startY, endX - startX, endY - startY);
        ctx.stroke();
      }
    }

    drawBox();
  }, [isDrawing, startX, startY, endX, endY]);

  function handleMouseDown(e) {
    setIsDrawing(true);
    setStartX(e.nativeEvent.offsetX);
    setStartY(e.nativeEvent.offsetY);
    setEndX(e.nativeEvent.offsetX);
    setEndY(e.nativeEvent.offsetY);
  }

  function handleMouseMove(e) {
    if (isDrawing) {
      setEndX(e.nativeEvent.offsetX);
      setEndY(e.nativeEvent.offsetY);
    }
  }

  function handleMouseUp() {
    setIsDrawing(false);
  }

  return (
    <canvas
      ref={canvasRef}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      style={{ border: '1px solid black' }}
    />
  );
}

export default BoxCanvas;

这个例子中，我们使用了 `useRef` 和 `useEffect` 来获取和绘制 Canvas 元素，并使用了 `useState` 来跟踪鼠标事件和绘制状态。当用户按下鼠标左键时，我们会记录起点坐标 `startX` 和 `startY`，当用户拖动鼠标时，我们会更新终点坐标 `endX` 和 `endY`。在每次更新 `startX`、`startY`、`endX` 或 `endY` 时，我们都会重新绘制 Canvas 元素，以更新方框的位置和大小。

注意，这个例子中我们只实现了画空心的方框，如果需要画实心的方框，可以使用 `ctx.fillRect()` 方法替换 `ctx.rect()` 方法。