CodeSky 代码之空

上回我们实现了 background 的效果，但是我们的代码只能达到一个填充缩放的效果，在不同的窗口大小，会导致图片的变形。如果是 background:cover 的效果则相当理想，它相当于需要我们把大的那一边居中对齐。

这里我们用到了使用图像 Using images 中的切片示例，简单的展示了如何处理：

1drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
2

sx / sy / sWidth / sHeight 是对原图的操作，对于切下来的图片，dx / dy / dWidth / dHeight 是切好的图像对于画布的相对操作。

理解了参数的含义，之后就比较好办了，直接用我们自己推导的公式求值裁边：

1          const imageWidth = image.width;
2          const imageHeight = image.height;
3          const imageRatio = imageWidth / imageHeight;
4          const canvasRatio = background.clientWidth / background.clientHeight;
5          let sx, sy, sHeight, sWidth;
6          if (imageRatio < canvasRatio) {
7            sWidth = imageWidth;
8            sHeight = sWidth / canvasRatio;
9            sx = 0;
10            sy = (imageHeight - sHeight) / 2;
11          } else {
12            sHeight = imageHeight;
13            sWidth = imageHeight * canvasRatio;
14            sy = 0;
15            sx = (imageWidth - sWidth) / 2;
16          }
17          ctx.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, background.clientWidth, background.clientHeight);
18

最终我们就实现了 cover 的效果。

（这篇文章我承认确实不太走心但昨天推公式推晕了不堪回首……）