获取更多笔记和源码
公众号:CocosCreator笔记
概念解释
Canvas（画布）
组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放
Widget（对齐挂件）
放置在渲染元素上，能够根据需要将元素对齐父节点的不同参考位置
设计分辨率
游戏在设计制作时场景的分辨率，即 Canvas 中的 Design Resolution 属性，也就是图中紫色边框的区域
屏幕分辨率
顾名思义，就是设备上屏幕的分辨率
Canvas
Canvas（画布） 组件能够随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。场景中的 Canvas 同时只能有一个，建议所有 UI 和可渲染元素都设置为 Canvas 的子节点。
选项：
Design Resolution：设计分辨率（内容生产者在制作场景时使用的分辨率蓝本）
Fit Height：适配高度（设计分辨率的高度自动撑满屏幕高度）
Fit Width：适配宽度（设计分辨率的宽度自动撑满屏幕宽度）
分辨率适配
Canvas 在做屏幕适配时，只会对整个游戏的画面进行缩放，并不会修改所在节点的尺寸，节点尺寸将默认跟设计分辨率保持一致
理想状态下，游戏设计分辨率的宽高比和屏幕分辨率的宽高比相同，就可以完美的适配设备屏幕：
游戏画面缩放比例 = 屏幕分辨率 / 设计分辨率
但越来越多异形屏的出现，甚至有时需要同时适配phone和pad，理想离我们越来越遥远······
下面来看下几种适配方案，具体取舍，需要根据项目需求来定夺
通常设计分辨率宽高比采用当前主流设备屏幕分辨率的宽高比，比如：
1280*720,1334*750,1624*750
示例中设计分辨率：1334*750
图片尺寸：1334*750
为了更方便直观，我们在场景里添加一些位置标识
1只勾选 Fit Height
适配方法：设计分辨率的高度自动撑满屏幕高度
游戏画面缩放比例 = 屏幕分辨率高度 / 设计分辨率高度
在 iPhone7Plus（1920*1080）上的表现
完美适配，图片完全显示
分析：
游戏画面缩放比例 = 1080 / 750 = 1.44
游戏画面缩放后的宽度 = 1334 * 1.44 = 1920
1920 = 1920（屏幕分辨率宽度）
宽度恰好等于屏幕的宽度，所以完全显示
在iPhoneX（2436*1125）上的表现
图片全部显示，但左右会有黑边，也就是横向没有铺满屏幕
分析：
游戏画面缩放比例 = 1125 / 750 = 1.5
游戏画面缩放后的宽度 = 1334 * 1.5 = 2001
2001 < 2436（屏幕分辨率宽度）
设计分辨率缩放后的宽度 < 屏幕分辨率的宽度，所以出现黑边
在ipad（2048*1536）上的表现
图片铺满屏幕，但左右没有完全显示
分析：
游戏画面缩放比例 = 1536 / 750 = 2
游戏画面缩放后的宽度 = 1334 * 2 = 2668
2668 > 2048 （屏幕分辨率宽度）
设计分辨率缩放后的宽度 > 屏幕分辨率的宽度，所以无法完全显示
2只勾选 Fit Width
适配方法：设计分辨率的宽度自动撑满屏幕宽度
游戏画面缩放比例 = 屏幕分辨率宽度 / 设计分辨率宽度
其原理和 Fit Height 一样，此处不再赘述
3同时勾选 Fit Height 和 Fit Width
适配方法：完整显示设计分辨率
在 iPhone7Plus（1920*1080）上依然是完美适配
在iPhoneX（2436*1125）上的表现和 Fit Height 的表现一样，但过程不一样
分析：
Fit Height：
游戏画面缩放比例 = 1125/ 750 = 1.5
游戏画面缩放后的宽度 = 1334 * 1.5 = 2001
2001 < 2436（屏幕分辨率宽度）
设计分辨率缩放后的宽度 < 屏幕分辨率的宽度，可以完全显示，但有黑边
Fit Width：
游戏画面缩放比例 = 2436 / 1334= 1.8
游戏画面缩放后的高度 = 750 * 1.8 = 1350
1350 > 1125（屏幕分辨率宽度）
设计分辨率缩放后的高度 > 屏幕分辨率的高度，无法完全显示
所以
游戏画面缩放比例 = Fit Height = 1.5
在ipad（2048*1536）上的表现
图片完全显示，但上下会有黑边，也就是纵向没有铺满屏幕
分析：
Fit Height：
游戏画面缩放比例 = 1536 / 750 = 2
游戏画面缩放后的宽度 = 1334 * 2 = 2668
2668 > 2048 （屏幕分辨率宽度）
设计分辨率缩放后的宽度 > 屏幕分辨率的宽度，无法完全显示
Fit Width：
游戏画面缩放比例 = 2048 / 1334 = 1.5
游戏画面缩放后的高度 = 750 * 1.5 = 1125
1125 < 1536（屏幕分辨率高度）
设计分辨率缩放后的高度 < 屏幕分辨率的高度，可以完全显示，但有黑边
所以
游戏画面缩放比例 = Fit Width = 1.5
4
同时不勾选 Fit Height 和 Fit Width
适配方式：铺满屏幕
其原理和同时勾选 Fit Height 和 Fit Width 相同，但最后采用的缩放比例是较大的那个，以此来铺满屏幕
5动态适配
很多情况下，针对不同的设备，适配方案也不是一成不变的
所以需要通过代码来动态适配
//获取屏幕分辨率let frame = cc.view.getFrameSize();//获取宽高比let ratio = frame.width / frame.height;?let fitHeight = true;let fitWidth = false;?//设置适配模式cc.Canvas.instance.fitHeight = fitHeight;cc.Canvas.instance.fitWidth = fitWidth;