react如何引用canvas
在 React 中使用 Canvas
React 中引用 Canvas 可以通过直接操作 DOM 或使用 React 的 useRef Hook 来实现。以下是两种常见的方法：
使用 useRef 获取 Canvas 元素
通过 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 = 'blue';
ctx.fillRect(10, 10, 150, 100);
}, []);
return (
<canvas
ref={canvasRef}
width={500}
height={500}
/>
);
}
export default CanvasComponent;动态创建 Canvas 元素
如果需要动态创建 Canvas 元素，可以在 useEffect 中完成创建和挂载。
import React, { useEffect } from 'react';
function DynamicCanvas() {
useEffect(() => {
const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 200, 100);
return () => {
document.body.removeChild(canvas);
};
}, []);
return null;
}
export default DynamicCanvas;使用第三方库
对于更复杂的 Canvas 操作，可以使用第三方库如 react-konva 或 fabric.js。
import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
function KonvaCanvas() {
return (
<Stage width={500} height={500}>
<Layer>
<Rect x={20} y={20} width={100} height={100} fill="green" />
</Layer>
</Stage>
);
}
export default KonvaCanvas;注意事项
- 确保在
useEffect中操作 Canvas，避免直接操作 DOM 导致 React 渲染不一致。 - 清理 Canvas 资源时，使用
useEffect的返回函数进行卸载。 - 动态调整 Canvas 大小时，需监听窗口变化并重新绘制内容。
