当前位置：首页 > React

react 如何使用canvas

2026-03-30 22:24:23React

在React中使用Canvas

React中可以通过<canvas>元素实现绘图功能，结合useRef和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 = 'blue';
    ctx.fillRect(10, 10, 100, 100);
  }, []);

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

处理动态绘图

function DynamicCanvas({ color }) {
  const canvasRef = useRef(null);

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

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = color;
    ctx.fillRect(50, 50, 200, 200);
  }, [color]);

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

添加交互事件

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

  const handleClick = (e) => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();

    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2 * Math.PI);
    ctx.fill();
  };

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

性能优化技巧

对于频繁更新的Canvas，建议使用requestAnimationFrame：

function AnimationCanvas() {
  const canvasRef = useRef(null);
  const animationRef = useRef(null);
  const angleRef = useRef(0);

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

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    angleRef.current += 0.05;
    const x = 100 + 50 * Math.cos(angleRef.current);
    const y = 100 + 50 * Math.sin(angleRef.current);

    ctx.fillStyle = 'green';
    ctx.fillRect(x, y, 20, 20);

    animationRef.current = requestAnimationFrame(animate);
  };

  useEffect(() => {
    animationRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(animationRef.current);
  }, []);

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

第三方库集成

对于复杂场景可以考虑使用库：

react 如何使用canvas

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

npm install react-konva konva

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

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