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中的事件不执行的情况发生

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！