Comment simuler CSS `background-size: cover` à l'aide de Canvas ?

Simulation CSS "background-size: cover" sur Canvas

Cette question aborde le défi d'étirer des images sur une toile lors du rendu sans maintenir leur rapport hauteur/largeur d'origine. Pour obtenir le comportement souhaité de « background-size: cover », comme indiqué en CSS, nous fournissons une fonction JavaScript personnalisée.

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);
}

Utilisation :

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

Cette fonction redimensionnera proportionnellement l'image pour l'adapter au conteneur.

Pour ajuster le décalage de l'image, spécifiez des paramètres :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!