为什么要在画布上使用scale()？

Question

当我看到画布上画的图像显示

canvas

时，我正在使用

blur

。我找到了这个问题的原因和解决方案。但是，有一点我不明白。是

context.scale()

。

我不太清楚

scale(dpr, dpr)

是什么功能，但我想也许这会将

css pixel

调整为

physical pixel

以适应

dpr

值。如果我的猜测是正确的，我有一个问题。

我正在使用

dpr value

为

2

的环境（显示）。 我正在使用一个环境（显示），其中

dpr value

是

2

。我认为即使没有

context.scale()

，画布的

CSS pixels

也会自动调整为

physical pixels

。 因为我的显示器的 dpr 值为

2

..

那么，为什么我要使用

context.scale(dpr, dpr)

？ 难道没有必要吗？ 我寻找的用于模糊故障排除的大多数代码都使用了scale()。

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

const dpr = window.devicePixelRatio

canvas.style.width = "300px";
canvas.style.height = "400px";


canvas.width = dpr * 300;
canvas.height = dpr * 400;

// ctx.scale(dpr, dpr); // Isn't it unnecessary?
ctx.strokeRect(100, 100, 150, 150);

<canvas id="screen"></canvas>

Answer 1

在这种情况下，比例用于根据“devicePixelRatio”改变矩形框的尺寸。因此，当 devicePixelRatio = 1.1 时，如果您不使用比例尺，则绘制的矩形尺寸将为 150 * 150，但如果您使用比例尺，则绘制的矩形尺寸将为 166 * 166。

我希望这是有道理的。