正如MDN web docs 中提到的画布比例：
默认情况下，画布上的一个单位正好是一个像素。例如，如果我们应用 0.5 的缩放因子，则生成的单位将变为 0.5 像素，因此形状将以一半大小绘制。以类似的方式将缩放因子设置为 2.0 会增加单位大小，现在一个单位变成两个像素。这会导致绘制两倍大的形状。
那么当我们增加画布的宽度/高度以进行缩放时，它的工作原理是否相同，或者只是拉伸图像，它会影响图像质量吗？
【问题讨论】：
标签： javascript html canvas html5-canvas
如果您直接更改画布 HTML 元素的 width 或 height 属性，则会更改画布像素缓冲区的大小并清除画布之前的任何内容。这不是缩放内容的有效方法:-)
CSS 缩放是通过更改 CSS 中画布的固有宽度或高度来调用的。在 CSS 中显着增加画布的尺寸可能会产生模糊，其方式类似于在图像查看器中缩放图像以超出图像的信息内容。
如果您在将形状和线条绘制到画布上之前更改画布缩放比例（通过其上下文对象），则绘图例程会将模糊限制为所绘制内容边缘上的单个像素。通常这类似于使用抗锯齿来渲染字体字符，可能不是不可取的。
CSS Images Module Level 3 的 2018-09 编辑草稿提出了一个 image-rendering 属性来控制 CSS 在缩放时如何插入图像。它lacks support在一些主流浏览器中作为草稿时间。
另请参阅有关使用 nearest neighbor interpolation to zoom canvas objects 的相关问题。
【讨论】：
canvas 上下文绘图方法要求我们在其方法中提供一些坐标和长度。
比如fillRect(x y, width, height)方法的x、y、width、height。
所有这些值都是无单位的，所以我们将其命名为 magical-unit。
由于画布是光栅图像，因此首先决定每个 magical-unit 代表该光栅图像的一个像素。当我们设置画布width 或height 时，我们只是改变了画布可以容纳的像素数。
因此，我们可以构建一个不错的 magical-unit-grid canvas.width * canvas.height * 1。
在这种情况下，当将 (10, 10) 作为参数传递给期望坐标为 magical-units 的方法时，指针将移动到坐标 10, 10 处的像素。
现在，有一些方法，比如scale()，还有translate()、transform() 等，它们会修改我们的magical-unit-grid。
translate(5, 10) 会将我们的 magical-unit-grid 水平移动 5 个magical-units，垂直移动 10 个。所以现在坐标(10,10) 将实际指向坐标15, 20 (10 + 5, 10 + 10) 处的像素。
在调用scale(2, 2) 之后，一个magical-unit 现在将等于画布上的两个像素。因此，如果我们将(10, 10) 传递给与上述相同的方法，我们的指针实际上将移动到坐标20, 20 处的像素。
我们以前的绘图不会改变，画布的质量没有什么不同，唯一改变的是我们的 magical-unit 的值。
【讨论】：
据我所知，和你说的完全一样。更改画布的尺寸时，图像会被拉伸，像素的插值方式与拉伸图像时相同。
在画布内缩放时，绘图引擎知道例如在缩放设置为 2 时绘制 2x2 像素。因此图像保持“锐利”。
【讨论】：