캔버스에서 CSS의 `배경 크기: 커버`를 시뮬레이션하는 방법은 무엇입니까?

캔버스에서 CSS의 "배경 크기: 표지" 시뮬레이션

캔버스에 이미지를 그릴 때 이미지가 표시되는 문제가 발생할 수 있습니다. 뻗어. 주어진 컨테이너에 맞게 이미지 크기를 비례적으로 조정하는 원하는 "표지" 기능을 달성하려면 더 복잡한 접근 방식이 필요합니다.

한 가지 솔루션은 다음 JavaScript 함수입니다.

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

이 기능을 사용하려면:

1. drawImageProp(ctx, image, 0, 0, width, height)를 호출하세요. 컨테이너 내부에 맞게 이미지 크기를 비례적으로 조정합니다.
2. 이미지를 오프셋하려면 마지막 두 매개변수 drawImageProp(ctx, image, 0, 0, width, height, offsetX, offsetY);를 사용합니다. 오프셋 범위는 0.0(왼쪽/상단)부터 1.0(오른쪽/하단)까지입니다.

위 내용은 캔버스에서 CSS의 `배경 크기: 커버`를 시뮬레이션하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!