Canvas中相同尺寸不同位置rect显示尺寸不一致问题求助

核心原因 #

你遇到的问题是Canvas绘图缓冲区尺寸与元素CSS显示尺寸不匹配导致的图形变形。Canvas有两个关键尺寸：

• 绘图缓冲区尺寸：由Canvas元素的width和height属性决定，这是绘图的实际分辨率。
• CSS显示尺寸：由元素的style.width和style.height控制，是Canvas在页面上的显示大小。

如果这两个尺寸的比例不一致，浏览器会自动拉伸绘图内容，导致你设置的相同宽高的矩形显示大小、位置都出现偏差——第二个矩形因为坐标靠后，缩放后的视觉差异更明显。

解决方法 #

1. 同步缓冲区与显示尺寸的比例
   确保Canvas的width/height属性比例，和CSS的width/height比例完全一致，避免拉伸。

2. 正确设置Canvas尺寸
   可以通过HTML属性直接设置，或者用JavaScript动态调整：

   • HTML方式：

     <canvas id="canvas" width="800" height="400" style="width: 800px; height: 400px;"></canvas>
     

   • JavaScript方式：

     const canvas = document.getElementById('canvas');
     // 设置绘图缓冲区尺寸（实际分辨率）
     canvas.width = 800;
     canvas.height = 400;
     // 如果需要调整显示大小，保持比例一致
     canvas.style.width = '400px';
     canvas.style.height = '200px';
     

3. 检查现有代码
   你的场景中应该是只设置了Canvas的CSS显示尺寸，没有指定width和height属性，导致浏览器使用默认的300x150缓冲区，和显示尺寸比例不符，最终引发缩放变形。

验证效果 #

按照上述方法设置后，再绘制两个宽40、高20的矩形，无论坐标是(0,0)还是(60,40)，显示大小都会完全一致。

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