当前位置：首页 > React

react 如何切canvas

2026-02-26 07:22:02React

在React中操作Canvas的方法

使用React操作Canvas可以通过直接访问DOM元素或利用第三方库简化流程。以下是几种常见方法：

使用useRef和useEffect钩子

通过React的useRef获取Canvas的DOM引用，在useEffect中执行绘图操作：

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

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

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

    // 绘制矩形
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 150, 100);
  }, []);

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

封装自定义Hook

将Canvas逻辑封装成可复用的Hook：

react 如何切canvas

function useCanvas(draw) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    draw(ctx);
  }, [draw]);

  return canvasRef;
}

function MyComponent() {
  const draw = (ctx) => {
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.stroke();
  };

  const canvasRef = useCanvas(draw);
  return <canvas ref={canvasRef} width={300} height={200} />;
}

使用第三方库

对于复杂场景，可以考虑以下库：

react-konva: 提供声明式Canvas API
fabric.js: 功能强大的Canvas库
p5.js: 创意编码库的React封装

react-konva示例：

react 如何切canvas

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

function App() {
  return (
    <Stage width={300} height={300}>
      <Layer>
        <Rect x={50} y={50} width={100} height={100} fill="red" />
      </Layer>
    </Stage>
  );
}

性能优化建议

高频更新时使用requestAnimationFrame：

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

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

    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillText(`Frame: ${frameCount++}`, 10, 10);
      requestAnimationFrame(animate);
    }

    animate();
    return () => cancelAnimationFrame(animate);
  }, []);

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

响应式处理

监听窗口大小变化时调整Canvas：

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

  useEffect(() => {
    function handleResize() {
      const canvas = canvasRef.current;
      canvas.width = window.innerWidth * 0.8;
      canvas.height = window.innerHeight * 0.6;
    }

    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);

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

这些方法覆盖了从基础操作到高级优化的不同场景，开发者可根据项目需求选择合适方案。对于复杂交互式图形应用，推荐使用专业Canvas库以提高开发效率。