JavaScript绘图应用问题：Canvas无法调整大小，需适配屏幕并留工具栏空间

嘿，我看你在用JavaScript和jQuery开发绘图应用时碰到了Canvas尺寸调整的棘手问题——明明写了代码设置宽高，但Canvas就是没按预期改变尺寸，还想让它适配用户屏幕同时给顶部工具栏留出空间对吧？我帮你拆解下问题根源，再给你落地的解决办法。

问题根源：Canvas的两个"尺寸"要分清 #

很多开发者容易忽略，Canvas元素其实有两个独立的尺寸：

• 绘图缓冲区尺寸：也就是canvas.width和canvas.height，这是Canvas内部用于绘制图形的实际分辨率，决定了绘图的清晰度。
• CSS样式尺寸：这是Canvas元素在页面上显示的大小，用CSS或者JS的style.width/height设置。

如果只修改其中一个，要么看起来尺寸没变化，要么会导致绘图内容拉伸变形。另外你提到要预留工具栏空间，直接用window.innerHeight肯定会让Canvas和工具栏重叠，得先算出工具栏的高度再做减法。

具体解决步骤 #

结合你的HTML结构（<div id="canvas"> <canvas class="drawing-canvas"></canvas> </div>），可以这么处理：

1. 获取Canvas元素和工具栏高度
   先拿到原生Canvas DOM元素（因为jQuery对象不能直接操作width/height属性），再获取工具栏的实际高度（包括内边距和边框）：

   const $canvas = $('.drawing-canvas');
   const canvas = $canvas[0]; // 转成原生DOM元素
   const toolbarHeight = $('#toolbar').outerHeight(); // 替换成你实际的工具栏选择器
   

2. 编写尺寸调整函数
   这个函数会计算可用空间，同时设置Canvas的两个尺寸：

   function resizeCanvas() {
     const availableWidth = window.innerWidth;
     // 减去工具栏高度，留出顶部空间
     const availableHeight = window.innerHeight - toolbarHeight;
   
     // 设置绘图缓冲区尺寸（关键！保证绘图不模糊）
     canvas.width = availableWidth;
     canvas.height = availableHeight;
   
     // 设置CSS显示尺寸，让Canvas占满可用空间
     $canvas.css({
       width: `${availableWidth}px`,
       height: `${availableHeight}px`
     });
   
     // 额外：如果父容器#canvas有样式限制，也要同步调整
     $('#canvas').css({
       width: `${availableWidth}px`,
       height: `${availableHeight}px`
     });
   }
   

3. 初始化+监听窗口 resize
   页面加载时先调用一次，再监听窗口大小变化，确保Canvas能实时适配：

   // 页面初始化时设置尺寸
   resizeCanvas();
   
   // 窗口大小改变时重新调整
   $(window).on('resize', resizeCanvas);
   

额外注意点 #

• 如果你的工具栏高度是动态变化的（比如折叠/展开），记得在工具栏状态改变时也调用resizeCanvas()函数。
• 要是Canvas出现模糊，检查下canvas.width/height是否和CSS设置的尺寸一致，或者考虑用devicePixelRatio做高清适配（这个是进阶需求，先搞定基础适配再说）。

内容的提问来源于stack exchange，提问作者Mister Dukk