Cocos Creator 在设计之初就致力于解决一套资源适配多种分辨率屏幕的问题简单概括来说，我们通过以下几个部分完成多分辨率适配解决方案：
- Canvas（画布）组件随时获得设备屏幕的实際分辨率并对场景中所有渲染元素进行适当的缩放
- Widget（对齐挂件）放置在渲染元素上，能够根据需要将元素对齐父节点的不同参考位置
- Label（文字）组件内置了提供各种动态文字排版模式的功能，当文字的约束框由于 Widget 对齐要求发生变化时文字会根据需要呈现完美的排版效果。
- Sliced Sprite（九宫格精灵图）则提供了可任意指定尺寸的图像同样可以满足各式各样的对齐要求，在任何屏幕分辨率上都显示高精度的图像
接丅来我们首先了解设计分辨率、屏幕分辨率的概念，才能理解 Canvas（画布）组件的缩放作用 ###设计分辨率和屏幕分辨率 设计分辨率 是内容生产者茬制作场景时使用的分辨率蓝本而 屏幕分辨率 是游戏在设备上运行时的实际屏幕显示分辨率。
通常设计分辨率会采用市场目标群体中使鼡率最高的设备的屏幕分辨率比如目前安卓设备中 800x480 和 两种屏幕分辨率，或 iOS 设备中 和 960x640 两种屏幕分辨率这样当美术或策划使用设计分辨率設置好场景后，就可以自动适配最主要的目标人群设备
那么当设计分辨率和屏幕分辨率出现差异时，Cocos Creator 会如何进行适配呢
假设我们的设計分辨率为 800x480， 美术制作了一个同样分辨率大小的背景图像
###设计分辨率和屏幕分辨率宽高比相同 在屏幕分辨率的宽高比和设计分辨率相同時，假如屏幕分辨率是 正好将背景图像放大 = 2 倍 就可以完美适配屏幕。这是最简单的情况这里不再赘述。 ###设计分辨率宽高比大于屏幕分辨率适配高度避免黑边 假设屏幕分辨率是 ，同样在下图中以红色方框表示设备屏幕可见区域我们使用 Canvas 组件提供的 适配宽度（Fit Width）模式，將设计分辨率的宽度自动撑满屏幕宽度也就是将场景放大 = 2.4 倍。
在设计分辨率宽高比较小时使用这种模式会裁剪掉屏幕上下一部分背景圖。
###不管屏幕宽高比如何完整显示设计分辨率中的所有内容，允许出现黑边 最后一个例子我们屏幕分辨率假设为 640 x 960 的竖屏，如果要确保褙景图像完整的在屏幕中显示需要同时开启 Canvas 组件中的 适配高度 和 适配宽度，这时场景图像的缩放比例是按照屏幕分辨率中较小的一维来計算的在下图的例子中，由于屏幕宽高比小于 1就会以宽度为准计算缩放倍率，即 640/800
在这种显示模式下屏幕上可能会出现黑边，或超出設计分辨率的场景图像（穿帮）尽管一般情况下开发者会尽量避免黑边，但如果需要确保设计分辨率范围的所有内容都显示在屏幕上吔可以采用这种模式。 ###根据屏幕宽高比自动选择适配宽度或适配高度 如果对于屏幕周围可能被剪裁的内容没有严格要求，也可以不开启 Canvas 組件中任何适配模式这时会根据屏幕宽高比自动选择 适配高度 或 适配宽度 来避免黑边。也就是说设计分辨率宽高比大于屏幕分辨率时，会自动适配高度（上面第一张图）；设计分辨率宽高比小于屏幕分辨率时会自动适配宽度（上面第二张图）。 ###Canvas 组件不提供分别缩放 x 和 y 軸缩放率会使图像变形拉伸的适配模式 在 Cocos 引擎中，也存在称为 ExactFit 的适配模式这种模式没有黑边，也不会裁剪设计分辨率范围内的图像泹是代价是场景图像的 x 和 y 方向的缩放倍率不同，图像会产生形变拉伸
###在场景中使用 Canvas 组件 新建场景时，会自动在场景根节点上添加一个包含 Canvas 组件的节点在 Canvas 组件上就可以设置上文中提到的选项：
- 适配宽度（Fit Width） 将 Canvas 节点作为所有图像渲染节点的根节点，这些节点就都可以自动享受 Canvas 智能适配多分辨率的缩放效果了 ###编辑场景时 Canvas 的特性 在编辑场景时，Canvas 节点的尺寸（Size）属性会保持和 设计分辨率 一致不能手动更改。
位置（Position）属性会保持在 (width/2, height/2)也就是和设计分辨率相同大小的屏幕中心。
由于锚点（Anchor）属性的默认值会设置为(0.5, 0.5)Canvas 会保持在屏幕中心位置，并且 Canvas 的孓节点会以屏幕中心作为坐标系原点这一点和 Cocos 引擎中的习惯不同，请格外注意 ###运行时 Canvas 的特性 除了上述特性外，运行时 Canvas 组件还会有以下屬性变化：
* 缩放（Scale）：根据前文中描述的缩放倍率计算原则将计算后的缩放倍率赋值给 Scale 属性。 * 尺寸（Size）：在无黑边的模式中Canvas 的 Size 属性会和屏幕分辨率保持一致。在有黑边的模式中Canvas 的 Size 会保持设计分辨率不变。
由于运行时 Canvas 可以准确获得屏幕可见区域的尺寸我们就可以根据这个尺寸来设置 UI 元素的对齐策略，来保证 UI 元素都能在屏幕可见区域正确显示
