介绍/* *
,,,,,,,,*,@param {号码},sx 固定盒子的x坐标,sy 固定盒子的y左标
,,,,,,,,*,@param {号码},box_w 固定盒子的宽,,box_h 固定盒子的高
,,,,,,,,*,@param {号码},source_w 原图片的宽,,source_h 原图片的高
,,,,,,,,*,@return {对象},{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;
,,,,,,,,,,,如果(source_w 祝辞,source_h | |, (source_w ==, source_h ,,, box_w & lt;, box_h)) {
,,,,,,,,,,,,,,,dHeight =, source_h * dWidth/source_w;
,,,,,,,,,,,dy =,, sy +, (box_h-dHeight)/2;
,,,,,,,,,,,}else 如果(source_w & lt;, source_h | |, (source_w ==, source_h ,,, box_w 祝辞,box_h)) {
,,,,,,,,,,,,,,,dWidth =, source_w * dHeight/source_h;
,,,,,,,,,,,,,,,dx =, sx +, (box_w-dWidth)/2;
,,,,,,,,,,,}
,,,,,,,,,,,返回{
,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,dy,
,,,,,,,,,,,,,,,dWidth,
,,,,,,,,,,,,,,dHeight
,,,,,,,,,,,}
,,,,,,,}
,,,,,,,var c=. getelementbyid (“myCanvas");
,,,,,,,var ctx=c.getContext (“2 d");
,,,,,,,ctx.fillStyle =, & # 39; # e1f0ff& # 39;;
,,,,,,,//固定盒子的位置和大小,图片需要放在这个盒子内
,,,,,,,ctx.fillRect(30日,30日,150年,200年);
,,,,,,,var img =, new 图像();
,,,,,,,img.onload =, function (), {
,,,,,,,,,,,console.log (img.width img.height);
,,,,,,,,,,,
,,,,,,,,,,,var imgRect =, containImg (30、30150200、img.width img.height);
,,,,,,,,,,,console.log (& # 39; imgRect& # 39;, imgRect);
,,,,,,,,,,,ctx.drawImage (imgRect.dx, img,还以为,imgRect.dy, imgRect.dWidth,, imgRect.dHeight),,
,,,,,,,,,,,
,,,,,,,}
,,,,,,,img.src =,“。/timg2.jpg",,,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下帆布绘图按照包含或者盖方式适配并居中显示的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
帆布绘图时drawImage,需要绘制的图片大小不同,比例各异,所以就需要像html + css布局那样,需要包含和封面来满足不同的需求。
<强>包含
保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
图片按照包含模式放到固定盒子的矩形内,则需要对图片进行一定的缩放。
原则是:
如果图片宽高不等,使图片的长边能完全显示出来,则原图片高的一边缩放后等于固定盒子对应的一边,等比例求出另外一边,
如果图片宽高相等,则根据固定盒子的宽高来决定缩放后图片的宽高,固定盒子的宽大于高,则缩放后的图片高等于固定盒子的高度,对应求出另外一边即可,反之亦然。
