JavaScript canvas 图片缩放：cover 模式实现

使用 JavaScript 函数 drawCoverImage(ctx, img, imgW, imgH, drawX, drawY, drawW, drawH) 可以以 cover 模式缩放并绘制图片到 canvas 画布上，确保图片完全覆盖目标区域，并保持原有比例。

函数代码：

function drawCoverImage(ctx, img, imgW, imgH, drawX, drawY, drawW, drawH) {
  // 计算图片的缩放比例
  var scaleX = drawW / imgW;
  var scaleY = drawH / imgH;
  
  // 选择较大的缩放比例作为实际缩放比例
  var scale = Math.max(scaleX, scaleY);
  
  // 计算实际绘制的宽度和高度
  var drawWidth = imgW * scale;
  var drawHeight = imgH * scale;
  
  // 计算绘制的起点坐标
  var drawXOffset = (drawW - drawWidth) / 2;
  var drawYOffset = (drawH - drawHeight) / 2;
  var drawXPos = drawX + drawXOffset;
  var drawYPos = drawY + drawYOffset;
  
  // 绘制图片
  ctx.drawImage(img, drawXPos, drawYPos, drawWidth, drawHeight);
}

使用方法：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'image.jpg';

img.onload = function() {
  drawCoverImage(ctx, img, img.width, img.height, 0, 0, canvas.width, canvas.height);
}

解释：

创建画布和图片元素：首先，创建一个<canvas>元素和一个<img>元素，并获取 canvas 的 2D 上下文 ctx 和图片的 URL img.src。
加载图片：使用 img.onload 事件监听图片加载完成，并在加载完成后执行 drawCoverImage 函数。
计算缩放比例：函数内部计算图片的水平和垂直缩放比例，选择较大的比例作为实际缩放比例，确保图片完全覆盖目标区域。
计算绘制尺寸和坐标：根据缩放比例计算绘制图片的宽度、高度和起点坐标，确保图片居中绘制在目标区域内。
绘制图片：使用 ctx.drawImage 函数将图片绘制到画布上，参数分别为图片对象、绘制起点 X 坐标、绘制起点 Y 坐标、绘制宽度、绘制高度。

注意：

请将代码中的 myCanvas 替换为您的画布元素 ID，以及 image.jpg 替换为您的图片 URL。
您可以根据需要修改函数的参数 drawX、drawY、drawW、drawH 来控制绘制图片的位置和大小。

通过以上步骤，您可以轻松实现图片以 cover 模式缩放并绘制到 canvas 画布上，达到响应式缩放的效果。