当前位置：首页 > React

react如何引用canvas

2026-02-26 05:42:47React

在 React 中使用 Canvas

React 中引用 Canvas 可以通过直接操作 DOM 或使用 React 的 useRef Hook 来实现。以下是两种常见的方法：

react如何引用canvas

使用 useRef 获取 Canvas 元素

通过 useRef 可以获取 Canvas 的 DOM 元素，然后在 useEffect 中绘制内容。

react如何引用canvas

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

function CanvasComponent() {
  const canvasRef = useRef(null);

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

    // 绘制内容
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 100);
  }, []);

  return (
    <canvas
      ref={canvasRef}
      width={500}
      height={500}
    />
  );
}

export default CanvasComponent;

动态创建 Canvas 元素

如果需要动态创建 Canvas 元素，可以在 useEffect 中完成创建和挂载。

import React, { useEffect } from 'react';

function DynamicCanvas() {
  useEffect(() => {
    const canvas = document.createElement('canvas');
    canvas.width = 500;
    canvas.height = 500;
    document.body.appendChild(canvas);

    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 200, 100);

    return () => {
      document.body.removeChild(canvas);
    };
  }, []);

  return null;
}

export default DynamicCanvas;

使用第三方库

对于更复杂的 Canvas 操作，可以使用第三方库如 react-konva 或 fabric.js。

import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';

function KonvaCanvas() {
  return (
    <Stage width={500} height={500}>
      <Layer>
        <Rect x={20} y={20} width={100} height={100} fill="green" />
      </Layer>
    </Stage>
  );
}

export default KonvaCanvas;