白云岛资源网 Design By www.pvray.com
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中的事件不执行的情况发生
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
白云岛资源网 Design By www.pvray.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
白云岛资源网 Design By www.pvray.com
暂无评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/2
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。