Cocos Creator 在設計之初就致力于解決一套資源適配多種分辨率屏幕的問題。簡單概括來說，我們通過以下幾個部分完成多分辨率適配解決方案：

• Canvas（畫布）組件隨時獲得設備屏幕的實際分辨率并對場景中所有渲染元素進行適當的縮放。
• Widget（對齊掛件）放置在渲染元素上，能夠根據需要將元素對齊父節點的不同參考位置。
• Label（文字）組件內置了提供各種動態文字排版模式的功能，當文字的約束框由于 Widget 對齊要求發生變化時，文字會根據需要呈現完美的排版效果。
• Sliced Sprite（九宮格精靈圖）則提供了可任意指定尺寸的圖像，同樣可以滿足各式各樣的對齊要求，在任何屏幕分辨率上都顯示高精度的圖像。

接下來我們首先了解設計分辨率、屏幕分辨率的概念，才能理解 Canvas（畫布）組件的縮放作用

設計分辨率和屏幕分辨率

設計分辨率 是內容生產者在制作場景時使用的分辨率藍本，而 屏幕分辨率 是游戲在設備上運行時的實際屏幕顯示分辨率。

通常設計分辨率會采用市場目標群體中使用率最高的設備的屏幕分辨率，比如目前安卓設備中 800x480 和 1280x720 兩種屏幕分辨率，或 iOS 設備中 1136x640 和 960x640 兩種屏幕分辨率。這樣當美術或策劃使用設計分辨率設置好場景后，就可以自動適配最主要的目標人群設備。

那么當設計分辨率和屏幕分辨率出現差異時，Cocos Creator 會如何進行適配呢？

假設我們的設計分辨率為 800x480， 美術制作了一個同樣分辨率大小的背景圖像。

此處輸入圖片的描述

設計分辨率和屏幕分辨率寬高比相同

在屏幕分辨率的寬高比和設計分辨率相同時，假如屏幕分辨率是 1600x960，正好將背景圖像放大 1600/800 = 2 倍 就可以完美適配屏幕。這是最簡單的情況，這里不再贅述。

設計分辨率寬高比大于屏幕分辨率，適配高度避免黑邊

假設屏幕分辨率是 1920x960，同樣在下圖中以紅色方框表示設備屏幕可見區域。我們使用 Canvas 組件提供的 適配寬度（Fit Width）模式，將設計分辨率的寬度自動撐滿屏幕寬度，也就是將場景放大 1920/800 = 2.4 倍。

此處輸入圖片的描述

在設計分辨率寬高比較小時，使用這種模式會裁剪掉屏幕上下一部分背景圖。

不管屏幕寬高比如何，完整顯示設計分辨率中的所有內容，允許出現黑邊

最后一個例子，我們屏幕分辨率假設為 640 x 960 的豎屏，如果要確保背景圖像完整的在屏幕中顯示，需要同時開啟 Canvas 組件中的 適配高度 和 適配寬度，這時場景圖像的縮放比例是按照屏幕分辨率中較小的一維來計算的，在下圖的例子中，由于屏幕寬高比小于 1，就會以寬度為準計算縮放倍率，即 640/800 = 0.8 倍。

此處輸入圖片的描述

在這種顯示模式下，屏幕上可能會出現黑邊，或超出設計分辨率的場景圖像（穿幫）。盡管一般情況下開發者會盡量避免黑邊，但如果需要確保設計分辨率范圍的所有內容都顯示在屏幕上，也可以采用這種模式。

根據屏幕寬高比，自動選擇適配寬度或適配高度

如果對于屏幕周圍可能被剪裁的內容沒有嚴格要求，也可以不開啟 Canvas 組件中任何適配模式，這時會根據屏幕寬高比自動選擇 適配高度 或 適配寬度 來避免黑邊。也就是說，設計分辨率寬高比大于屏幕分辨率時，會自動適配高度（上面第一張圖）；設計分辨率寬高比小于屏幕分辨率時，會自動適配寬度（上面第二張圖）。

Canvas 組件不提供分別縮放 x 和 y 軸縮放率，會使圖像變形拉伸的適配模式

在 Cocos 引擎中，也存在稱為 ExactFit 的適配模式，這種模式沒有黑邊，也不會裁剪設計分辨率范圍內的圖像。但是代價是場景圖像的 x 和 y 方向的縮放倍率不同，圖像會產生形變拉伸。

在場景中使用 Canvas 組件

新建場景時，會自動在場景根節點上添加一個包含 Canvas 組件的節點。在 Canvas 組件上就可以設置上文中提到的選項：

• 設計分辨率（Design Resolution）
• 適配高度（Fit Height）

• 適配寬度（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 元素都能在屏幕可見區域正確顯示。