canvas自适应drawimage

在Canvas中，可以使用drawImage()方法将图片绘制到画布上。要让canvas自适应drawImage，可以根据画布的尺寸和图片的尺寸计算出最合适的缩放比例，再根据缩放比例调整绘制的位置和尺寸。

具体的实现方法可以参考以下代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'image.jpg';

img.onload = function() {
  const canvasWidth = canvas.width;
  const canvasHeight = canvas.height;
  const imgWidth = img.width;
  const imgHeight = img.height;
  
  const scaleX = canvasWidth / imgWidth;
  const scaleY = canvasHeight / imgHeight;
  const scale = Math.min(scaleX, scaleY);
  
  const newImgWidth = imgWidth * scale;
  const newImgHeight = imgHeight * scale;
  const x = (canvasWidth - newImgWidth) / 2;
  const y = (canvasHeight - newImgHeight) / 2;
  
  ctx.drawImage(img, x, y, newImgWidth, newImgHeight);
}

在代码中，首先获取canvas和context对象，再创建一个Image对象并将图片地址赋给它。在Image对象的onload方法中，获取画布和图片的尺寸，计算缩放比例，然后根据缩放比例调整绘制的位置和尺寸。最后使用drawImage方法将图片绘制在canvas上即可。