drawImage绘制canvas时，绘制的图片大小不同，比例不同，所以需要contain和cover满足html+css布局等不同需求。contain保持宽高比并对图片进行缩放，使图片的长边可以完全显示。也就是说，图片可以完整显示。图片按照contain方式放置在固定框的矩形内，图片需要进行一定的缩放。原理是：如果图片的宽和高不相等，让图片的长边可以完全显示，那么原图片高的边等于固定框后对应的边缩放，另一边按等比例计算。如果图片的宽高相等，则根据固定框的宽高确定缩放图片的宽高。如果固定框的宽度大于高度，则缩放后的图片高度等于固定框的高度，则可以相应地找到另一边，反之亦然。/***@param{Number}sx固定框的x坐标，sy固定框的y左标记*@param{Number}box_w固定框的宽度，box_h固定框的高度*@param{Number}source_w原图宽，source_h原图高*@return{Object}{drawImage的参数，x坐标，y坐标，缩放后的图宽高}，对应drawImage(imageResource,dx,dy,dWidth,dHeight)*/functioncontainImg(sx,sy,box_w,box_h,source_w,source_h){vardx=sx,dy=sy,dWidth=box_w,dHeight=box_h;if(source_w>source_h||(source_w==source_h&&box_wbox_h)){dWidth=source_w*dHeight/source_h;dx=sx+(box_w-dWidth)/2;}return{dx,dy,dWidth,dHeight}}varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillStyle='#e1f0ff';//固定框的位置和大小——需要放置图片ctx.fillRect(30,30,150,200);varimg=新图像（）；img.onload=function(){console.log(img.width,img.height);varimgRect=containImg(30,30,150,200,img.width,img.height);console.log('imgRect',imgRect);ctx.drawImage(img,imgRect.dx,imgRect.dy,imgRect.dWidth,imgRect.dHeight);}图片。src="./timg2.jpg";//注意：在img预加载模式下，onload要放在src赋值的上面，以免在有缓存存在的情况下onload事件没有被触发，导致onload中的事件没有被执行时的情况发生时，cover保持纵横比对图片进行缩放，只保证图片的短边可以完全显示。也就是说，画面通常只在水平或垂直方向上是完整的，在其他方向上会发生截取。原理：根据固定框的比例截取部分图片/***@param{Number}box_w固定框的宽度，box_h固定框的高度*@param{Number}source_w的宽度原图，source_h原图的高度*@return{Object}{截取的图片信息}，对应drawImage(imageResource,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)参数*/functioncoverImg(box_w,box_h,source_w,source_h){varsx=0,sy=0,sWidth=source_w,sHeight=source_h;if(source_w>source_h||(source_w==source_h&&box_wbox_h)){sHeight=box_h*sWidth/box_w;sy=(source_h-sHeight)/2;}return{sx,sy,sWidth,sHeight}}varc=做cument.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillStyle='#e1f0ff';//固定盒子的位置和大小——图片需要放在这个盒子里ctx.fillRect(30,30,150,200);varimg=新图像（）；img.onload=function(){console.log(img.width,img.height);varimgRect=coverImg(150,200,img.width,img.height);console.log('imgRect',imgRect);ctx.drawImage(img,imgRect.sx,imgRect.sy,imgRect.sWidth,imgRect.sHeight,30,30,150,200);}图片。src="./timg2.jpg";//注意：在img预加载模式下，onload要放在src赋值的上面，以免在有缓存存在的情况下onload事件没有被触发，导致onload中的事件没有被执行的情况发生
