模擬 CSS 背景大小：畫布中的覆蓋
畫布繪製涉及在 2D 上下文上渲染圖像。然而，當使用drawImage()方法繪製影像時，可能會遇到影像拉伸或扭曲的問題。這可以透過模擬 CSS 屬性 background-size: cover 來解決，該屬性會縮放圖像，同時保留其縱橫比以適合所需的尺寸。
在畫布中實現此行為的一種方法是透過以下函數:
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
// Default arguments and validation
if (arguments.length === 2) {
x = y = 0;
w = ctx.canvas.width;
h = ctx.canvas.height;
}
offsetX = typeof offsetX === "number" ? offsetX : 0.5;
offsetY = typeof offsetY === "number" ? offsetY : 0.5;
// Image dimensions and aspect ratio
var iw = img.width,
ih = img.height,
r = Math.min(w / iw, h / ih),
nw = iw * r, // New proposed width
nh = ih * r, // New proposed height
cx, cy, cw, ch, ar = 1;
// Determine image scaling factor
if (nw < w) ar = w / nw;
if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // Updated
nw *= ar;
nh *= ar;
// Calculate source rectangle
cw = iw / (nw / w);
ch = ih / (nh / h);
cx = (iw - cw) * offsetX;
cy = (ih - ch) * offsetY;
// Validate source rectangle
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cw > iw) cw = iw;
if (ch > ih) ch = ih;
// Draw the image to the destination rectangle
ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}可以如下呼叫此函數：
drawImageProp(ctx, image, 0, 0, width, height);
這將按如下方式呼叫此函數：
這將按如下方式呼叫此函數：這將按如下方式呼叫比例縮放影像以適合提供的範圍寬度和高度尺寸。可選的 offsetX 和 offsetY 參數允許在目標矩形內進行影像偏移。以上是如何在 Canvas 中模擬 CSS `background-size: cover`？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
