求助：Canvas绘制的矩形尺寸超出设定值如何解决

问题核心在于Canvas有两个独立的尺寸属性：

• CSS显示尺寸：控制Canvas在页面上呈现的大小，你已经通过style设置为容器的100%（对应750px×450px）
• 画布分辨率尺寸：通过canvas元素的width和height属性定义，这是绘图API（比如fillRect）使用的坐标系统基准。你没设置这两个属性，Canvas会使用默认的300px×150px，之后被CSS拉伸到750px×450px，导致绘制的150px图形被放大了2.5倍（750/300）。

修复步骤 #

给Canvas元素添加width和height属性，值和容器的实际像素尺寸一致：

修改你的PHP输出Canvas的代码：

echo '<h2><strong>Supermarket</strong> Map</h2>';
echo '<div class="wrapper_map" style="width: 750px; height: 450px; position:relative; margin: 0 auto;"><canvas id="myCanvas" width="750" height="450" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas></div>';

原理说明 #

width和height属性决定了Canvas绘图缓冲区的像素数量，CSS的width/height只是把这个缓冲区缩放显示在页面上。当两者比例一致时，绘制的图形不会变形；如果比例不一致，就会出现拉伸或压缩的情况。

动态尺寸兼容方案（可选） #

如果你的容器尺寸是动态变化的（比如响应式布局），可以用JavaScript动态同步Canvas的分辨率尺寸和显示尺寸：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 同步尺寸并重新绘制
function resizeCanvas() {
  const wrapper = document.querySelector('.wrapper_map');
  canvas.width = wrapper.clientWidth;
  canvas.height = wrapper.clientHeight;
  
  ctx.fillStyle = "' . $color . '";
  ctx.fillRect(0,0,150,150);
}

// 初始化执行一次
resizeCanvas();
// 监听窗口变化（按需添加）
window.addEventListener('resize', resizeCanvas);

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