Bagaimana untuk Mensimulasikan CSS `saiz latar belakang: penutup` Menggunakan Kanvas?

Mensimulasikan CSS "saiz latar belakang: penutup" pada Kanvas

Soalan ini menangani cabaran meregangkan imej pada kanvas apabila dipaparkan tanpa mengekalkan nisbah aspek asal mereka. Untuk mencapai gelagat "saiz latar belakang: penutup" yang diingini, seperti yang dilihat dalam CSS, kami menyediakan fungsi JavaScript tersuai.

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

Penggunaan:

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

Fungsi ini akan menskalakan imej secara berkadaran agar muat dalam bekas.

Untuk melaraskan pengimbangan imej, nyatakan tambahan parameter:

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

Atas ialah kandungan terperinci Bagaimana untuk Mensimulasikan CSS `saiz latar belakang: penutup` Menggunakan Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!