Canvas 实现 background cover效果(图片裁剪)
上回我们实现了 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)