Canvas で CSS `background-size: cover` をシミュレートする方法

CSS 背景サイズのシミュレート: キャンバスのカバー

キャンバスの描画には、2D コンテキストでの画像のレンダリングが含まれます。ただし、drawImage() メソッドを使用して画像を描画する場合、画像の伸縮や歪みに関する問題が発生する可能性があります。これは、CSS プロパティのbackground-size: cover をシミュレートすることで対処できます。これは、画像のアスペクト比を維持しながら、必要な寸法内に収まるように画像を拡大縮小します。

キャンバスでこの動作を実現する 1 つの方法は、次の関数を使用することです。 :

function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

    // Default arguments and validation
    if (arguments.length === 2) {
        x = y = 0;
        w = ctx.canvas.width;
        h = ctx.canvas.height;
    }
    offsetX = typeof offsetX === "number" ? offsetX : 0.5;
    offsetY = typeof offsetY === "number" ? offsetY : 0.5;

    // Image dimensions and aspect ratio
    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        nw = iw * r,   // New proposed width
        nh = ih * r,   // New proposed height
        cx, cy, cw, ch, ar = 1;

    // Determine image scaling factor
    if (nw < w) ar = w / nw;                             
    if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh;  // Updated

    nw *= ar;
    nh *= ar;

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

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

    // Validate source rectangle
    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;

    // Draw the image to the destination rectangle
    ctx.drawImage(img, cx, cy, cw, ch,  x, y, w, h);
}

この関数は次のように呼び出すことができます:

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

これにより、イメージに合わせて比例的に拡大縮小されます。指定された幅と高さの寸法内にあること。オプションの offsetX および offsetY パラメータを使用すると、宛先の四角形内で画像をオフセットできます。

以上がCanvas で CSS `background-size: cover` をシミュレートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。