当前位置：首页 > React

react如何引用canvas

2026-03-30 22:42:15React

在React中使用Canvas

React中引用Canvas可以通过直接使用HTML的<canvas>元素或借助第三方库实现。以下是几种常见方法：

使用原生Canvas API

在React组件中直接创建<canvas>元素并通过ref获取其上下文：

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} />;
}

使用React-Konva库

React-Konva是专门为React封装的Canvas库，提供声明式API：

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

function KonvaCanvas() {
  return (
    <Stage width={300} height={200}>
      <Layer>
        <Rect x={10} y={10} width={150} height={100} fill="green" />
      </Layer>
    </Stage>
  );
}

动态调整Canvas尺寸

处理响应式布局时需要动态更新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应用：

使用requestAnimationFrame实现动画
离屏Canvas缓存静态元素
避免频繁的Canvas状态改变
使用CSS transform替代重绘

与其他React特性集成

Canvas可以与React状态管理无缝集成：

react如何引用canvas

const [color, setColor] = useState('green');

useEffect(() => {
  const ctx = canvasRef.current.getContext('2d');
  ctx.clearRect(0, 0, 300, 200);
  ctx.fillStyle = color;
  ctx.fillRect(10, 10, 150, 100);
}, [color]);