canvas画图时drawImage，须要绘制的图片大小差别，比例各别，所以就须要像html+css规划那样，须要contain和cover来满足差别的需求。

contain

• 坚持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，能够完全地将图片显示出来。

图片依据contain形式放到牢固盒子的矩形内，则须要对图片举行肯定的缩放。
原则是：

1. 假如图片宽高不等，使图片的长边能完全显示出来，则原图片高的一边缩放后即是牢固盒子对应的一边，等比例求出别的一边，
2. 假如图片宽高相称，则依据牢固盒子的宽高来决议缩放后图片的宽高，牢固盒子的宽大于高，则缩放后的图片高即是牢固盒子的高度，对应求出别的一边即可，反之亦然。

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

• 坚持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片一般只在程度或垂直方向是完全的，另一个方向将会发作截取。

道理：

1. 依据牢固盒子的比例截取图片的部份

        /**
         * @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中的事宜不实行的状况发作