react 如何切canvas
在 React 中操作 Canvas
React 中操作 Canvas 可以通过直接使用 DOM API 或结合第三方库实现。以下是几种常见方法：
使用 ref 直接操作 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 = 'green';
ctx.fillRect(10, 10, 150, 100);
}, []);
return <canvas ref={canvasRef} width={300} height={200} />;
}使用 react-konva 库
对于更复杂的 Canvas 交互，可以使用 react-konva 库：
import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
function CanvasWithKonva() {
return (
<Stage width={300} height={200}>
<Layer>
<Rect x={10} y={10} width={150} height={100} fill="green" />
</Layer>
</Stage>
);
}动态更新 Canvas 内容
当需要响应式更新 Canvas 时，可以将绘制逻辑封装成函数：
function CanvasWithAnimation() {
const canvasRef = useRef(null);
const [position, setPosition] = useState(0);
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(position, 50, 100, 75);
}, [position]);
return (
<>
<canvas ref={canvasRef} width={300} height={200} />
<button onClick={() => setPosition(p => p + 10)}>Move</button>
</>
);
}性能优化技巧
对于频繁更新的 Canvas，考虑使用 requestAnimationFrame：
function AnimatedCanvas() {
const canvasRef = useRef(null);
const animationRef = useRef();
const animate = () => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
// 动画逻辑
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(Date.now() % 300, 50, 50, 50);
animationRef.current = requestAnimationFrame(animate);
};
useEffect(() => {
animationRef.current = requestAnimationFrame(animate);
return () => cancelAnimationFrame(animationRef.current);
}, []);
return <canvas ref={canvasRef} width={300} height={200} />;
}注意事项
- Canvas 是立即模式绘图表面，内容不会自动保留，需要手动重绘
- 避免在渲染函数中直接操作 Canvas，应使用 useEffect
- 对于复杂场景，考虑使用专门的 Canvas 库如 Fabric.js 或 Paper.js
- 确保在组件卸载时清理动画和事件监听
