最近在写一个编辑页面使用canvas使用时发现一个bug就是在我进入页面后---打开F12----刷新页面---关掉控制台---canvas的大小没有自适应窗口大小导致图片可视区域变小了图片移动后会移出外面被白色底遮住如图图一是正常大小图二是没有自适应窗口大小可视区域变小了问题原理1. Canvas 的双重尺寸系统HTML5 Canvas 有 两套独立的尺寸系统 !-- ① 分辨率属性内在尺寸 画布的 像素分辨率 决定画布能画多少个像素点-- canvas width800 height600/canvas !-- ② CSS 样式外在尺寸 画布的 显示尺寸 决定画布在页面上占多大空间-- canvas stylewidth: 800px; height: 600px;/canvas2. 问题的根源当我 打开浏览器控制台 时关闭控制台前 ┌─────────────────────────────┐ │ 容器宽度1200px │ │ ┌─────────────────────┐ │ │ │ Canvas (1200x768) │ │ │ │ width1200 │ │ │ │ stylewidth:1200px│ │ │ └─────────────────────┘ │ ─────────────────────────────┘ 打开控制台后控制台占用了 500px ┌───────────────────┐ │ 容器宽度749px │ ← 容器被压缩了 │ ┌───────────── │ │ │ Canvas │ │ │ │ width1200│ │ ← ❌ 分辨率还是 1200 │ │ stylewidth:1200px│ ← ❌ CSS 还是 1200 │ └─────────────┘ │ │ ↑ │ │ 溢出了 │ └───────────────────┘结果 - ❌ Canvas 的 width 属性1200 容器宽度749- ❌ Canvas 的 CSS width 1200px 容器宽度749px- 画布溢出容器图片显示不完整解决方案1. 图像显示区域---添加 ref 绑定容器 DOMdiv refcanvasContainer !-- ✅ 新增这一行 -- classimage-container wheelhandleWheel ... 作用 让 Vue 能获取到容器的 DOM 元素从而获取容器的实际尺寸2. 使用 setDimensions() 同步更新画布尺寸// 同时更新分辨率和 CSS 样式 canvas.setDimensions({ width, height }, { cssOnly: false });作用 - ✅ 更新 Canvas 的分辨率属性 width749 - ✅ 更新 Canvas 的 CSS 样式 stylewidth: 749px - ✅ 确保两者完全一致避免图片变形3. 完整的 handleResize 函数const handleResize () { // ① 获取容器 DOM const container canvasContainer.value; if (!container || !canvas || !currentImage.value) return; // ② 获取容器最新的实际宽高 const width container.clientWidth; const height container.clientHeight; // ③ 同时更新分辨率和 CSS canvas.setDimensions({ width, height }, { cssOnly: false }); // ④ 重新计算图片缩放比例 const image currentImage.value; const scaleX width / image.width; const scaleY height / image.height; const scale Math.min(scaleX, scaleY) * 0.9; // ⑤ 重新设置图片缩放并居中 image.set({ scaleX: scale, scaleY: scale, left: width / 2, top: height / 2, originX: center, originY: center }); // ⑥ 强制刷新画布 canvas.renderAll(); };作用监听窗口大小变化自动调整画布尺寸- 打开/关闭浏览器控制台- 调整浏览器窗口大小- 切换浏览器全屏handleResize 函数会被触发 自动让画布适应新的容器尺寸。4.页面初始化时添加监听器// 绑定窗口大小变化监听 window.addEventListener(resize, handleResize);触发时机 用户打开控制台↓浏览器窗口宽度变化↓触发 resize 事件↓调用 handleResize()↓画布自动适应新尺寸 ✅ 扩展知识Canvas 分辨率 vs 显示尺寸高分辨率 小显示尺寸 清晰但浪费 ┌────────────────────┐ │ Canvas: 2000x2000 │ ← 2000 个像素点 │ 显示500x500px │ ← 压缩显示 │ 效果超清晰 │ └────────────────────┘ 低分辨率 大显示尺寸 模糊 ┌────────────────────┐ │ Canvas: 500x500 │ ← 500 个像素点 │ 显示1000x1000px │ ← 拉伸显示 │ 效果马赛克 │ └────────────────────┘ 最佳实践分辨率 显示尺寸 ┌────────────────────┐ │ Canvas: 800x600 │ ← 800 个像素点 │ 显示800x600px │ ← 1:1 显示 │ 效果最清晰 │ └────────────────────┘