如何正确缩放HTML Canvas？地图绘制被截断问题求助

核心问题 #

你的地图渲染截断，本质是Canvas元素的实际绘制尺寸（width/height属性）与显示尺寸（CSS样式）不匹配。默认情况下Canvas的width属性为300px、height属性为150px，这刚好对应你看到的9x5区域（300/32≈9，150/32≈5）。缩放Canvas的CSS样式只是拉伸了显示区域，但实际绘制的内容仍被限制在默认的300x150范围内，因此只有这部分能显示出来。

修复步骤 #

1. 设置Canvas的实际绘制尺寸
   根据你的70x70地图（每个单元格32px），计算并设置Canvas的属性尺寸：

   const canvas = document.getElementById('你的CanvasID');
   canvas.width = 70 * 32; // 2240px
   canvas.height = 70 * 32; // 2240px
   

   这是解决截断问题的核心，只有设置正确的属性尺寸，Canvas才能容纳完整的地图绘制内容。

2. 用CSS适配显示尺寸（可选）
   如果2240px的Canvas超出页面范围，可通过CSS设置自适应显示：

   canvas {
     width: 100%;
     height: auto;
     object-fit: contain;
   }
   

   既保证绘制内容完整，又能在页面上合理展示。

3. 优化循环变量类型（避免潜在问题）
   你用for...in遍历的x、y键可能是字符串类型，显式转为数字可避免隐式转换带来的意外错误：

   for(let xStr in data.region.draw_info){
     const x = Number(xStr);
     const cellX = data.region.draw_info[xStr];
     for(let yStr in cellX){
       const y = Number(yStr);
       const cellY = cellX[yStr];
       for(let cell of cellY){
         ctx.drawImage(image, constans[cell[0]].x, constans[cell[0]].y, 32, 32, x*32, y*32, 32,32);
       }
     }
   }
   

关于drawImage参数的验证 #

你的drawImage参数是正确的，参数顺序完全符合标准：
drawImage(image, 源图裁剪X, 源图裁剪Y, 源图裁剪宽度, 源图裁剪高度, 画布绘制X, 画布绘制Y, 画布绘制宽度, 画布绘制高度)
缩放后能显示完整地图也证明了绘制逻辑没问题，截断问题与该方法的参数无关。

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