Canvas を使用して CSS `background-size: cover` をシミュレートする方法

Canvas 上で 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 中国語 Web サイトの他の関連記事を参照してください。