[前端] 自适应高度canvas绘制图片如何使用canvas自适应绘制图片在设置宽度后，根据获取的图片宽度与画布宽度的

如何使用canvas自适应绘制图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }

    .box {
      width: 0;
      height: 0;
      margin: 20px auto;
    }
  </style>
</head>
<body>
 <div class='box'>
    <canvas id="cont">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
 </div>
</body>
</html>

在设置宽度后，根据获取的图片宽度与画布宽度的比例求得缩放后图片的高度，再依据此高度设置画布及画布容器高度

    // 获取canvas画布
    const canvas=document.querySelector('#cont')
    // 获取画布的应用上下文
    const ctx =canvas.getContext('2d')
    let img = new Image()
    
    img.src='https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg'
    // img.src='https://tse4-mm.cn.bing.net/th/id/OIP-C.duz6S7Fvygrqd6Yj_DcXAQHaF7?rs=1&pid=ImgDetMain'
    // img.src = 'https://tse3-mm.cn.bing.net/th/id/OIP-C.UllrrmFca7aI0hvA8gSMrQHaQC?rs=1&pid=ImgDetMain' 
    
    img.onload = function (){
    
      let div = document.querySelector('.box')
      let canvas = document.querySelector('#cont')
      
      let imgWidth = 300 // 图片宽度 // 小程序中可使用 rpx -> px
      
      // 比例尺
      let imgRatio = img.width / imgWidth
      
      // 图片自适应后的宽度
      let conversionHeight = img.height / imgRatio
      
      // 设置盒子和canvas 盒子转换后的高度
      div.style.height =  conversionHeight + 'px'
      div.style.width = imgWidth + 'px'
      
      canvas.height =  conversionHeight
      
      // 绘制转换后的自适应图片
      // drawImage(第一个参数是你要绘制的图像，二三个参数是你绘制的起点位置)
    	ctx.drawImage(img, 0, 0, imgWidth, conversionHeight)
      
      // 其他细节可自行补充
    }

在同等宽度下绘制的图片高度是自适应的