Flexbox中Canvas无法等比例缩放的原因及适配方案咨询

首先得明确一个关键知识点：Canvas元素有两个完全独立的尺寸：

• 绘图缓冲区尺寸：就是你在标签上设置的width和height属性，这是Canvas内部用来绘制图形的“画布”大小，比如你设置的800x800，意味着它的绘图区域是正方形。
• CSS渲染尺寸：就是通过CSS设置的width/height，这是Canvas在页面上显示的大小。

你遇到的变形问题，核心就是这两个尺寸的比例不匹配了：

1. 你的CSS只给Canvas设置了width: 50%，但没有指定height，浏览器会尝试根据Canvas的intrinsic尺寸（也就是标签上的800x800，1:1比例）来计算高度，但在flex布局中，父容器的默认高度是auto（由内容撑开），这就导致Canvas的CSS高度没有跟着宽度按比例缩小，最终渲染的宽高比和绘图缓冲区的比例不一致，圆形自然就被拉成椭圆了。
2. 你提到flex-shrink被忽略，是因为你给Canvas设置了固定的width: 50%，这个值会作为flex布局的基础宽度，当父容器宽度变化时，flex-grow会让两个Canvas平分剩余空间，但高度没有被约束，所以不会同步缩放。

要实现一行Canvas随父flex容器宽度自动等比例缩放，核心就是强制Canvas的CSS渲染尺寸和绘图缓冲区尺寸保持相同的宽高比，下面提供两种可行方案：

方案一：使用aspect-ratio属性（推荐，现代浏览器支持） #

这是最简单的方法，直接给Canvas设置aspect-ratio来固定宽高比，让高度自动跟随宽度调整：

div {
  display: flex;
  width: 100%;
  overflow: hidden;
}
div > canvas {
  flex-grow: 1;
  flex-shrink: 1;
  width: 50%;
  aspect-ratio: 1/1; /* 保持和绘图缓冲区一致的1:1比例 */
  height: auto; /* 让高度自动适应宽度 */
}

方案二：Padding Top 技巧（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以给每个Canvas套一个容器，利用padding-top来维持比例：

修改后的HTML #

<div>
  <div class="canvas-wrap">
    <canvas class="colorPicker" width="800" height="800"></canvas>
  </div>
  <div class="canvas-wrap">
    <canvas class="colorPicker" width="800" height="800"></canvas>
  </div>
</div>

修改后的CSS #

div {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.canvas-wrap {
  flex-grow: 1;
  flex-shrink: 1;
  width: 50%;
  position: relative;
  padding-top: 100%; /* 100%对应1:1比例，若绘图区是4:3则设75% */
}
.canvas-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这样无论父容器宽度怎么变化，Canvas都会保持正方形比例，绘制的图形也不会变形。

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