Canvas 实现 background cover效果（图片裁剪）

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

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

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

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

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

          const imageWidth = image.width;
          const imageHeight = image.height;
          const imageRatio = imageWidth / imageHeight;
          const canvasRatio = background.clientWidth / background.clientHeight;
          let sx, sy, sHeight, sWidth;
          if (imageRatio < canvasRatio) {
            sWidth = imageWidth;
            sHeight = sWidth / canvasRatio;
            sx = 0;
            sy = (imageHeight - sHeight) / 2;
          } else {
            sHeight = imageHeight;
            sWidth = imageHeight * canvasRatio;
            sy = 0;
            sx = (imageWidth - sWidth) / 2;
          }
          ctx.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, background.clientWidth, background.clientHeight);

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

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