当前位置：首页 > React

react如何引用canvas

2026-01-15 10:49:17React

使用 ref 直接操作 Canvas

在 React 中通过 useRef 钩子创建引用，绑定到 <canvas> 元素的 ref 属性。组件挂载后可通过 ref.current 获取原生 DOM 节点：

import { useRef, useEffect } from 'react';

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

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    // 绘制操作
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
  }, []);

  return <canvas ref={canvasRef} width={200} height={200} />;
}

封装自定义 Hook

将 Canvas 逻辑封装成可复用的 Hook，返回 ref 和工具函数：

react如何引用canvas

function useCanvas() {
  const ref = useRef(null);

  const draw = (callback) => {
    if (ref.current) {
      const ctx = ref.current.getContext('2d');
      callback(ctx);
    }
  };

  return [ref, draw];
}

// 使用示例
function MyComponent() {
  const [canvasRef, draw] = useCanvas();

  useEffect(() => {
    draw((ctx) => {
      ctx.beginPath();
      ctx.arc(50, 50, 30, 0, Math.PI * 2);
      ctx.fill();
    });
  }, []);

  return <canvas ref={canvasRef} />;
}

动态调整 Canvas 尺寸

通过 ResizeObserver 或窗口事件监听实现响应式 Canvas：

useEffect(() => {
  const canvas = canvasRef.current;
  const resize = () => {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
  };

  const observer = new ResizeObserver(resize);
  observer.observe(canvas);
  return () => observer.disconnect();
}, []);

第三方库集成

对于复杂场景可使用专门处理 Canvas 的 React 库：

react如何引用canvas

import { Canvas } from '@react-three/fiber'; // 3D 渲染
import { Stage, Layer, Rect } from 'react-konva'; // 2D 图形

// react-konva 示例
function KonvaDemo() {
  return (
    <Stage width={300} height={300}>
      <Layer>
        <Rect x={50} y={50} width={100} height={100} fill="blue" />
      </Layer>
    </Stage>
  );
}

TypeScript 类型定义

为 Canvas 添加类型安全支持：

const canvasRef = useRef<HTMLCanvasElement>(null);

useEffect(() => {
  if (canvasRef.current) {
    const ctx = canvasRef.current.getContext('2d');
    if (ctx) {
      // ctx 自动推断为 CanvasRenderingContext2D
    }
  }
}, []);

性能优化技巧

避免频繁重绘，使用 requestAnimationFrame 实现动画：

function animate() {
  ctx.clearRect(0, 0, width, height);
  // 绘制逻辑
  requestAnimationFrame(animate);
}

useEffect(() => {
  const frameId = requestAnimationFrame(animate);
  return () => cancelAnimationFrame(frameId);
}, []);