html5画布缩放和增加缩放画布尺寸有什么区别?

在画布内缩放时,绘图引擎知道在缩放设置为2时绘制2x2像素。因此图像保持“锐利”。

画布上下文绘制方法要求我们在其方法中提供一些坐标和长度。 例如 x , y width , height 的 fillRect(x y, width, height)

所有这些值都是无单位的,所以我们来命名它 魔法单位 .

由于画布是光栅图像,因此决定首先 魔法单位 宽度 或 高度 ,我们只是更改画布可以容纳的像素数。

因此,我们可以建立一个良好的 魔法单位网格 画布宽度*画布高度*1。
在这种情况下,当经过 (10, 10) 作为方法的参数,该方法要求 ,指针将移动到坐标处的像素 10, 10

scale() ,但也 translate() , transform() 会改变我们的 魔法单位网格

translate(5, 10) 例如,我们的 五点之前 魔法单位 水平方向和垂直方向。现在是坐标 (10,10) 将实际指向坐标处的像素 15, 20 (10 + 5, 10 + 10).

在打电话给 scale(2, 2) ,一个 魔法单位 现在将等于画布上的两个像素。所以,如果我们通过 (10, 10) 20, 20 .

我们以前的画不会改变,我们的画布质量也没有什么不同,唯一改变的是我们作品的价值 .

如果你直接改变 width 或 height 属性,您可以更改画布像素缓冲区的大小并清除画布上以前的任何内容。这不是缩放内容的有效方法:-)

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

2018-09年度编辑工作底稿 CSS Images Module Level 3 image-rendering 属性来控制缩放时CSS如何插值图像。它 lacks support 在一些主要浏览器中作为草稿的时间。

nearest neighbor interpolation to zoom canvas objects .