如何使用 Canvas 模擬 CSS `background-size: cover`？

在畫布上模擬CSS“background-size: cover”

這個問題解決了在渲染時在畫布上拉伸圖像而無需維護的挑戰他們原來的長寬比。為了實作 CSS 中所需的「background-size: cover」行為，我們提供了自訂 JavaScript 函數。

function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
  // Logic to determine new width, height, and offsets for proportional image scaling
  // ... [code omitted for brevity]

  ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}

用法：

drawImageProp(ctx, image, 0, 0, width, height);

此函數將按比例縮放影像以適合容器。

要調整影像偏移，請指定附加價值參數：

var offsetX = 0.5; // center x
var offsetY = 0.5; // center y
drawImageProp(ctx, image, 0, 0, width, height, offsetX, offsetY);

以上是如何使用 Canvas 模擬 CSS `background-size: cover`？的詳細內容。更多資訊請關注PHP中文網其他相關文章！