为什么使用 devicePixelRatio 在上下文中不起作用-PHP中文网问答

我的问题是关于使用 devicePixelRatio。考虑以下示例：

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

  canvas.style.width = `${size}px`;
  canvas.style.height = `${size}px`;

  const scale = window.devicePixelRatio;
  canvas.width = Math.floor(size * scale);
  canvas.height = Math.floor(size * scale);
  canvas.style.backgroundColor="red";
  ctx.fillStyle = "black";
  ctx.fillRect( 3, 3, 1,1 );

我想要的是这样的：

我的屏幕的 devicePixelRatio 等于 2。

我的目标是在尺寸为 5x5 的画布中显示尺寸为 1x1 的点。

我应用了我所理解的，与显示缓冲区的大小相比，我将绘图缓冲区的大小加倍。

对于点大小：1x1，结果很好。

但画布的尺寸仍然是原来的两倍。 10x10 为了什么？解释当然是显而易见的......

5月1日重写了我的问题，不清楚

我的屏幕返回的 window.devicePixelRatio 值等于 2

我的目标是编写在正方形中显示像素的代码。

正方形的大小为 5x5 像素。

我尝试使用以下代码：

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

  canvas.style.width = `${size}px`;
  canvas.style.height = `${size}px`;

  const scale = window.devicePixelRatio;
  canvas.width = Math.floor(size * scale);
  canvas.height = Math.floor(size * scale);
  canvas.style.backgroundColor="red";
  ctx.fillStyle = "black";
  ctx.fillRect( 3, 3, 1,1 );

这是结果：我复制并粘贴了屏幕截图

它在Gimp下，我放大并添加了一个网格

黑点，ctx.fillRect( 3, 3, 1,1 ) 的结果正是我想要的大小。

但是红色背景的大小为 10 x 10。我希望它是 5x5