Javascript html5画布缩放与为缩放而增加画布尺寸之间有什么区别？

如画布比例中所述：

默认情况下，画布上的一个单位正好是一个像素。例如，如果我们应用0.5的比例因子，结果单位将变为0.5像素，因此形状将以一半大小绘制。以类似的方式，将比例因子设置为2.0将增加单位大小，一个单位现在变成两个像素。这将导致绘制两倍大的形状

---

那么，当我们为了缩放目的而增加画布的宽度/高度时，它的工作原理是一样的，还是只是拉伸图像，它会影响图像质量？

据我所知，这正是您所说的。更改画布的尺寸时，图像将被拉伸，像素的插值方式与拉伸图像时相同

---

在画布内缩放时，绘图引擎知道，例如，当缩放设置为2时，绘制2x2像素。因此，图像仍然“清晰”。画布上下文绘制方法要求我们在其方法中提供一些坐标和长度。 例如，

fillRect（xy，width，height）

方法的

x

、

y

、

width

所有这些值都是无单位的，所以让我们把它命名为神奇单位

由于画布是一个光栅图像，因此决定首先，每个魔法单元代表该光栅图像的一个像素。当我们设置画布的

宽度

或

高度

时，我们只是在更改画布可以容纳的像素数

因此，我们可以用canvas.width*canvas.height*1构建一个漂亮的魔法单位网格。
在这种情况下，当将

（10,10）

作为参数传递给需要以魔法单位表示坐标的方法时，指针将移动到坐标

10,10

处的像素

现在，有一些方法，比如

scale（）

，还有

translate（）

，

transform（）

等，可以修改我们神奇的单位网格

translate（5，10）

例如，将我们的魔法单位网格水平移动5个魔法单位，垂直移动10个。现在坐标

（10,10）

将实际指向坐标

15,20

（10+5,10+10）处的像素

在调用

缩放（2，2）

后，一个魔法单位现在将等于画布上的两个像素。因此，如果我们将

（10,10）

传递到与上面相同的方法，指针将实际移动到坐标

20,20

处的像素

---

我们以前的画作不会改变，画布的质量也没有什么不同，唯一改变的是我们魔法单位的价值。

如果您直接更改画布HTML元素的

宽度

或

高度

属性，您可以更改画布像素缓冲区的大小，并擦除画布上以前的任何内容。这不是缩放内容的有效方法：-）

CSS缩放是通过更改CSS中画布的固有宽度或高度来调用的。在CSS中显著增加画布的尺寸可能会产生模糊，其方式类似于在图像查看器中将图像缩放到图像信息内容之外

如果在画布上绘制形状和线条之前更改画布缩放（通过其上下文对象），则绘制例程将模糊限制为绘制内容边缘上的单个像素。通常，这类似于使用抗锯齿来呈现字体字符，可能不是不需要的

2018-09年的编辑草稿提出了一个

图像渲染

属性来控制CSS在缩放时如何插值图像。它在一些主要浏览器中作为草稿的时间

另请参见有关使用的相关问题