HTML 5 在 flexbox 中使用画布会导致奇怪的缩放

Question

当在 flexbox 中使用画布并绘制相同大小的矩形时，它似乎会出现故障。

看看下面的例子： 它在光标位置绘制一个一个像素的矩形，但绘制的矩形相对于左上角的距离大小不同。

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

canvas.addEventListener("click", (event) => {
    let x = event.offsetX;
  let y = event.offsetY;
  ctx.fillRect(x, y, x + 1, y + 1);
});

#container {
  display: flex;
}

#first {
  flex: 1 1 auto;
  background-color: green;
  width: 60px;
}

#second {
  flex: 2 1 auto;
  background-color: red;
  
}

canvas {
  
  object-fit:none;
  object-position:top left;
}

#third {
  flex: 1 1 auto;
  background-color: green;
  width: 60px;
}

<div id="container">
  <div id="first"></div>
  <div id="second">
    <canvas id="canvas" height="160px"></canvas>
  </div>
  <div id="third"></div>
</div>

如何防止这种情况发生？

Answer 1

查看https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect。 fillRect 的第三个和第四个参数是高度和宽度，而不是位置。所以如果我理解正确，如果你正在寻找一个 1x1 的正方形，你会希望这两个都只是 1。