咨询：Canvas画布中图片Y轴被拉伸的原因

你的图片在Y轴方向拉伸，核心原因是Canvas元素的CSS显示尺寸与原生绘图缓冲区尺寸比例不匹配。

Canvas存在两套独立的尺寸系统：

• 绘图缓冲区尺寸：由canvas标签的width和height属性决定，这是Canvas内部用于绘制图形、图片的实际像素画布大小，默认值为300px×150px。
• CSS显示尺寸：即你代码中设置的width:700px; height:700px;，这是Canvas元素在页面上呈现的视觉大小。

当这两套尺寸的宽高比不一致时，Canvas会自动拉伸缓冲区里的内容来适配CSS尺寸，最终导致绘制的图片变形。比如如果你的Canvas标签未设置width和height属性，默认缓冲区是300×150（宽高比2:1），而CSS强制显示为700×700（宽高比1:1），Y轴方向就会被拉伸。

解决方法 #

确保Canvas的绘图缓冲区尺寸与CSS显示尺寸一致：

1. 直接在HTML标签中设置属性：

   <canvas width="700" height="700"></canvas>
   

2. 或者通过JavaScript动态设置：

   const canvas = document.querySelector('canvas');
   canvas.width = 700;
   canvas.height = 700;
   

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