模拟背景大小：在画布上覆盖

Question

我正在画像这样的画布：ctx.drawImage(data[i].image, data[i].pos.x, data[i].pos.y, data[i].pos.w, data[i].pos.h);问题是图片越来越拉伸，我不希望这样。我如何模拟css属性background-size: cover在卡瓦斯画图像。http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover看看100% 100%（我现在拥有的）和cover（我的目标）之间的区别。

Answer 1

如果您正在寻找一种适用于大多数情况的简单解决方案，并且还包括类似CSS contain的功能，请尝试以下方法：

function fit(contains) {

  return (parentWidth, parentHeight, childWidth, childHeight, scale = 1, offsetX = 0.5, offsetY = 0.5) => {

    const childRatio = childWidth / childHeight

    const parentRatio = parentWidth / parentHeight

    let width = parentWidth * scale

    let height = parentHeight * scale

    if (contains ? (childRatio > parentRatio) : (childRatio < parentRatio)) {

      height = width / childRatio

    } else {

      width = height * childRatio

    }

    return {

      width,

      height,

      offsetX: (parentWidth - width) * offsetX,

      offsetY: (parentHeight - height) * offsetY

    }

  }

}

export const contain = fit(true)

export const cover = fit(false)

内部比例的略微修改版本，包括比例和偏移

用法：

import {cover, contain} from './intrinsic-scale'

const {

  offsetX, 

  offsetY, 

  width, 

  height

} = cover(parentWidth, parentHeight, imageWidth, imageHeight)

// or...

const {

  offsetX, 

  offsetY, 

  width, 

  height

} = contain(parentWidth, parentHeight, imageWidth, imageHeight)

ctx.drawImage(image, offsetX, offsetY, width, height)