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)/2misd什么意思; }el 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, imgr滑翔翼ect.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; }el 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中的事件不执行的情况发生
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。
本文发布于:2023-04-03 03:38:06,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/8a25f2f81f3627359f17cd0c41a0a315.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:canvas绘图按照contain或者cover方式适配并居中显示.doc
本文 PDF 下载地址:canvas绘图按照contain或者cover方式适配并居中显示.pdf
留言与评论(共有 0 条评论) |