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

Mensimulasikan "saiz latar belakang: penutup" CSS dalam Kanvas

Apabila melukis imej pada kanvas, anda mungkin menghadapi isu imej sedang terbentang. Untuk mencapai kefungsian "penutup" yang diingini, yang menskalakan imej secara berkadar agar muat dalam bekas tertentu, pendekatan yang lebih kompleks diperlukan.

Satu penyelesaian ialah fungsi JavaScript berikut:

/**
 * By Ken Fyrstenberg Nilsen
 *
 * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
 *
 * If image and context are only arguments rectangle will equal canvas
 */
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

    if (arguments.length === 2) {
        x = y = 0;
        w = ctx.canvas.width;
        h = ctx.canvas.height;
    }

    // default offset is center
    offsetX = typeof offsetX === "number" ? offsetX : 0.5;
    offsetY = typeof offsetY === "number" ? offsetY : 0.5;

    // keep bounds [0.0, 1.0]
    if (offsetX < 0) offsetX = 0;
    if (offsetY < 0) offsetY = 0;
    if (offsetX > 1) offsetX = 1;
    if (offsetY > 1) offsetY = 1;

    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        nw = iw * r,   // new prop. width
        nh = ih * r,   // new prop. height
        cx, cy, cw, ch, ar = 1;

    // decide which gap to fill
    if (nw < w) ar = w / nw;
    if (Math.abs(ar - 1) < 1e-14 &amp;&amp; nh < h) ar = h / nh;  // updated
    nw *= ar;
    nh *= ar;

    // calc source rectangle
    cw = iw / (nw / w);
    ch = ih / (nh / h);

    cx = (iw - cw) * offsetX;
    cy = (ih - ch) * offsetY;

    // make sure source rectangle is valid
    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;

    // fill image in dest. rectangle
    ctx.drawImage(img, cx, cy, cw, ch,  x, y, w, h);
}

Untuk menggunakan fungsi ini:

1. Panggil drawImageProp(ctx, imej, 0, 0, lebar, tinggi); untuk menskalakan imej secara berkadar agar muat di dalam bekas.
2. Untuk mengimbangi imej, gunakan dua parameter terakhir: drawImageProp(ctx, image, 0, 0, width, height, offsetX, offsetY);. Offset berjulat daripada 0.0 (kiri/atas) hingga 1.0 (kanan/bawah).

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