当前位置：首页 > React

react如何引用canvas

2026-02-11 19:40:03React

在React中使用Canvas的方法

使用ref直接操作Canvas

通过React的useRef钩子获取Canvas DOM元素，直接在useEffect中绘制内容。这种方式适合需要精细控制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 = 'green';
    ctx.fillRect(10, 10, 150, 100);
  }, []);

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

封装Canvas为独立组件

将Canvas逻辑封装成可复用的组件，通过props传递绘制参数。这种方式适合需要多次使用Canvas或需要动态更新的场景。

function Canvas({ width, height, draw }) {
  const canvasRef = useRef(null);

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

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

function App() {
  const draw = (ctx) => {
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, 100, 100);
  };

  return <Canvas width={200} height={200} draw={draw} />;
}

使用第三方库

对于复杂Canvas操作，可以使用专门的React Canvas库如react-konva或fabric.js。这些库提供了更高级的API和性能优化。

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

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

处理Canvas动画

在React中实现Canvas动画需要使用requestAnimationFrame，注意在组件卸载时清除动画循环。

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

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

    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillRect(x, 10, 50, 50);
      x += 1;
      frameId = requestAnimationFrame(render);
    }
    render();

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

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

响应式Canvas

使Canvas自动适应容器大小，需要监听resize事件并调整Canvas尺寸。

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

  useEffect(() => {
    const canvas = canvasRef.current;
    const container = canvas.parentElement;

    function resizeCanvas() {
      canvas.width = container.clientWidth;
      canvas.height = container.clientHeight;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'purple';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

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

  return (
    <div style={{ width: '100%', height: '200px' }}>
      <canvas ref={canvasRef} />
    </div>
  );
}

react如何引用canvas