CodeSky 代码之空

随手记录自己的学习过程

Canvas 实现 background cover效果(图片裁剪)

2017-05-10 23:28分类: JavaScript评论: 0

上回我们实现了 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 的效果。

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

评论 (0)