当前位置：首页 > React

react 如何切canvas

2026-01-23 17:23:27React

在 React 中操作 Canvas

React 中操作 Canvas 需要通过 useRef 获取 DOM 节点，并在 useEffect 或组件挂载后通过原生 API 绘制内容。以下是具体实现方法：

创建 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 = 'red';
    ctx.fillRect(10, 10, 100, 100);
  }, []);

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

动态调整 Canvas 尺寸 通过监听窗口变化或父容器尺寸变化，动态更新 Canvas 的宽高属性：

react 如何切canvas

useEffect(() => {
  const handleResize = () => {
    const canvas = canvasRef.current;
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    // 重绘内容
  };
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

封装 Canvas 绘制逻辑 将绘制逻辑抽离为独立函数，便于复用和维护：

const drawCircle = (ctx, x, y, radius) => {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();
};

// 在 useEffect 中调用
drawCircle(ctx, 200, 200, 50);

处理交互事件 通过事件监听实现 Canvas 交互：

react 如何切canvas

<canvas 
  ref={canvasRef}
  onMouseMove={(e) => {
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    // 根据坐标更新绘制
  }}
/>

使用第三方库 对于复杂场景，可考虑使用专门库：

react-konva: 提供声明式 Canvas API
fabric.js: 功能强大的 Canvas 操作库
pixi.js: 适合游戏和图形密集型应用

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

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

性能优化建议