今天小编跟大家讲解下有关canvas绘图按照contain或者cover方式适配并居中显示 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关canvas绘图按照contain或者cover方式适配并居中显示 的相关资料，希望小伙伴们看了有所帮助。
canvas绘图时drawImage，需要绘制的图片大小不同，比例各异，所以就需要像html+css布局那样，需要contain和cover来满足不同的需求。
contain
保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
图片按照contain模式放到固定盒子的矩形内，则需要对图片进行一定的缩放。
原则是：
如果图片宽高不等，使图片的长边能完全显示出来，则原图片高的一边缩放后等于固定盒子对应的一边，等比例求出另外一边，
如果图片宽高相等，则根据固定盒子的宽高来决定缩放后图片的宽高，固定盒子的宽大于高，则缩放后的图片高等于固定盒子的高度，对应求出另外一边即可，反之亦然。
function containImg(sx, sy , box_w, box_h, source_w, source_h){ var dx = sx, dy = sy, dWidth = box_w, dHeight = box_h; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ dHeight = source_h*dWidth/source_w; dy = sy + (box_h-dHeight)/2; }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){ dWidth = source_w*dHeight/source_h; dx = sx + (box_w-dWidth)/2; } return{ dx, dy, dWidth, dHeight } } var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle = '#e1f0ff'; //固定盒子的位置和大小--图片需要放在这个盒子内 ctx.fillRect(30, 30, 150, 200); var img = new Image(); img.onload = function () { console.log(img.width,img.height); var imgRect = containImg(30,30,150,200,img.width,img.height); console.log('imgRect',imgRect); ctx.drawImage(img, imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight); } img.src = "./timg2.jpg"; //注：img预加载模式下，onload应该放在为src赋值的上面，以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生cover
保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
原理：
按照固定盒子的比例截取图片的部分
function coverImg(box_w, box_h, source_w, source_h){ var sx = 0, sy = 0, sWidth = source_w, sHeight = source_h; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ sWidth = box_w*sHeight/box_h; sx = (source_w-sWidth)/2; }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){ sHeight = box_h*sWidth/box_w; sy = (source_h-sHeight)/2; } return{ sx, sy, sWidth, sHeight } } var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle = '#e1f0ff'; //固定盒子的位置和大小--图片需要放在这个盒子内 ctx.fillRect(30, 30, 150, 200); var img = new Image(); img.onload = function () { console.log(img.width,img.height); var imgRect = 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); } img.src = "./timg2.jpg"; //注：img预加载模式下，onload应该放在为src赋值的上面，以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。
来源：爱蒂网
