canvas绘图按照contain或者cover方式适配并居中显示

canvas绘图时drawimage，需要绘制的图片大小不同，比例各异，所以就需要像html+css布局那样，需要contain和cover来满足不同的需求。

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)
         */
        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

保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

原理：

按照固定盒子的比例截取图片的部分

        /**
         * @param {number} box_w 固定盒子的宽, box_h 固定盒子的高
         * @param {number} source_w 原图片的宽, source_h 原图片的高
         * @return {object} {截取的图片信息}，对应drawimage(imageresource, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)参数
        */
        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中的事件不执行的情况发生

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。