diff --git a/src/components/ImageCanvas.tsx b/src/components/ImageCanvas.tsx
index cd3819f..2e78080 100644
--- a/src/components/ImageCanvas.tsx
+++ b/src/components/ImageCanvas.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { Stage, Layer, Image as KonvaImage, Line } from 'react-konva';
 import { useAppStore } from '../store/useAppStore';
 import { Button } from './ui/Button';
@@ -29,6 +29,11 @@ export const ImageCanvas: React.FC = () => {
   const [isDrawing, setIsDrawing] = useState(false);
   const [currentStroke, setCurrentStroke] = useState<number[]>([]);
 
+  const handleZoom = useCallback((delta: number) => {
+    const newZoom = Math.max(0.1, Math.min(3, canvasZoom + delta));
+    setCanvasZoom(newZoom);
+  }, [canvasZoom, setCanvasZoom]);
+
   // 加载图像并在 canvasImage 变化时自动适应
   useEffect(() => {
     if (canvasImage) {
@@ -77,6 +82,21 @@ export const ImageCanvas: React.FC = () => {
     return () => window.removeEventListener('resize', updateSize);
   }, []);
 
+  // 处理鼠标滚轮缩放
+  useEffect(() => {
+    const container = document.getElementById('canvas-container');
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      handleZoom(delta);
+    };
+
+    container.addEventListener('wheel', handleWheel, { passive: false });
+    return () => container.removeEventListener('wheel', handleWheel);
+  }, [canvasZoom]);
+
   const handleMouseDown = (e: any) => {
     if (selectedTool !== 'mask' || !image) return;
     
@@ -140,11 +160,6 @@ export const ImageCanvas: React.FC = () => {
     setCurrentStroke([]);
   };
 
-  const handleZoom = (delta: number) => {
-    const newZoom = Math.max(0.1, Math.min(3, canvasZoom + delta));
-    setCanvasZoom(newZoom);
-  };
-
   const handleReset = () => {
     if (image) {
       const isMobile = window.innerWidth < 768;