当前位置：首页 > React

react 如何使用canvas

2026-01-15 10:31:29React

使用 Canvas 在 React 中的方法

基本用法

在 React 中使用 canvas 需要通过 useRef 或 createRef 获取 DOM 节点。以下是一个简单的示例：

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={300} height={300} />;
}

export default CanvasComponent;

动态绘制

可以通过事件或状态变化触发 Canvas 的重新绘制。例如，根据鼠标移动绘制路径：

function InteractiveCanvas() {
  const canvasRef = useRef(null);
  const [isDrawing, setIsDrawing] = React.useState(false);

  const startDrawing = (e) => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
    setIsDrawing(true);
  };

  const draw = (e) => {
    if (!isDrawing) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    ctx.lineTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
    ctx.stroke();
  };

  const stopDrawing = () => setIsDrawing(false);

  return (
    <canvas
      ref={canvasRef}
      width={500}
      height={500}
      onMouseDown={startDrawing}
      onMouseMove={draw}
      onMouseUp={stopDrawing}
      onMouseLeave={stopDrawing}
    />
  );
}

性能优化

对于复杂的 Canvas 动画或高频更新，建议使用 requestAnimationFrame 实现循环渲染：

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

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

    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillRect(x, 50, 50, 50);
      x = (x + 1) % canvas.width;
      frameId = requestAnimationFrame(animate);
    };

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

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

第三方库集成

如果需要更高级的功能（如图像处理、物理引擎），可以结合第三方库如 fabric.js 或 konva.js：

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

function KonvaCanvas() {
  const containerRef = useRef(null);

  useEffect(() => {
    const stage = new Konva.Stage({
      container: containerRef.current,
      width: 300,
      height: 300,
    });

    const layer = new Konva.Layer();
    const circle = new Konva.Circle({
      x: 150,
      y: 150,
      radius: 50,
      fill: 'green',
    });

    layer.add(circle);
    stage.add(layer);
  }, []);

  return <div ref={containerRef} />;
}