使用HTML Canvas绘制30×30图形为何显示为矩形而非正方形？

嘿，我来帮你排查这个正方形变矩形的问题！这种情况在Canvas开发里挺常见的，大概率是这几个原因导致的，咱们一个个看：

1. Canvas的绘图缓冲区尺寸和显示尺寸不匹配（最常见） #

Canvas有两个关键尺寸：

• 一个是绘图缓冲区的原生尺寸：通过Canvas元素的width和height属性设置，这是Canvas内部用来绘制图形的“画布大小”。
• 另一个是页面上的显示尺寸：通过CSS的width和height设置，这是它在浏览器里呈现的大小。

如果这两个尺寸不一样，就会像把一张小图片强行拉大/缩小一样，导致所有绘制的图形被拉伸。比如你可能只在CSS里设置了Canvas的宽高，但没给它的width和height属性赋值，默认的缓冲区尺寸是300×150，这时候你的30×30正方形就会被按比例拉伸。

解决方法：
确保Canvas的属性尺寸和显示尺寸一致，比如用JS动态设置：

const canvas = document.getElementById("你的CanvasID");
// 让绘图缓冲区和显示尺寸完全匹配
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

或者直接在HTML里写死属性：

<canvas id="myCanvas" width="600" height="600"></canvas>

记住：别只靠CSS设置Canvas宽高，一定要同步设置它的width和height属性！

2. Component构造函数的绘制逻辑出错 #

检查你的component函数，看看在绘制矩形的时候有没有搞反宽高参数。Canvas的fillRect方法参数顺序是：fillRect(x坐标, y坐标, 宽度, 高度)，如果你的构造函数里写成了这样：

function component(height, width, color, x, y) {
  this.x = x;
  this.y = y;
  this.w = width;
  this.h = height;
  
  this.update = function() {
    ctx.fillStyle = color;
    // 这里把宽高写反了！
    ctx.fillRect(this.x, this.y, this.h, this.w);
  }
}

那即使传入的是30和30，一旦Canvas本身有拉伸，就会显示成矩形。赶紧核对fillRect的参数顺序，确保宽度和高度对应正确。

3. Canvas上下文被设置了不等比缩放 #

如果你的代码里给Canvas上下文（ctx）调用了scale或者transform方法，并且设置了不等比的缩放比例，比如ctx.scale(1.5, 1)，那正方形也会被横向拉伸。

检查方法：
看看代码里有没有类似这样的语句：

ctx.scale(2, 1); // 横向放大2倍，纵向不变，会拉伸图形

如果有，把缩放比例改成一致的，比如scale(1,1)或者scale(2,2)，这样图形就不会变形了。

先从第一个原因查起，这个问题出现的概率最高！

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