这篇文章给大家分享的是有关canvas绘图怎么设置配置并居中的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

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)*/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_w<box_h)){dHeight=source_h*dWidth/source_w;dy=sy+(box_h-dHeight)/2;}elseif(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}}varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillStyle='#e1f0ff';//固定盒子的位置和大小--图片需要放在这个盒子内ctx.fillRect(30,30,150,200);varimg=newImage();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);}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)参数*/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_w<box_h)){sWidth=box_w*sHeight/box_h;sx=(source_w-sWidth)/2;}elseif(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}}varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillStyle='#e1f0ff';//固定盒子的位置和大小--图片需要放在这个盒子内ctx.fillRect(30,30,150,200);varimg=newImage();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);}img.src="./timg2.jpg";//注：img预加载模式下，onload应该放在为src赋值的上面，以避免已有缓存的情况下无法触发onload事件从而导致onload中的事件不执行的情况发生

感谢各位的阅读！关于“canvas绘图怎么设置配置并居中”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！