最近用 Cocos Creator (cc) 開發(fā)微信小游戲。由于 微信小游戲存在 主域和子域的隔離；

• 主域，你的主要游戲場景，和一些交互按鈕等內(nèi)容；

• 子域，主要用于獲取用戶數(shù)據(jù)和排行榜的顯示；

微信這樣分開也是為了更好地保護(hù)用戶數(shù)據(jù)，防止數(shù)據(jù)泄露。因此一定要合理的設(shè)計自己的主域和子域；

凡是設(shè)計從微信里獲取數(shù)據(jù)的比如用戶頭像，游戲成績等；一定需要在子域的canvas 完成繪制；

實(shí)際在完成排行榜的功能時候遇到了一點(diǎn)兼容性的問題，Android 的部分機(jī)型(自己這邊全部復(fù)現(xiàn))和 iOS 設(shè)備上存在畫布模糊的問題:

ios 的截圖如下:

搜索了一下，發(fā)現(xiàn)沒有多少人提出這樣的問題，但是看別的游戲也存在同樣的問題；

不過，靈機(jī)一動?。?！

如果前端接觸 canvas 的話，才開始都會遇到一個問題，就是再 PC 上看著挺好的，但是在移移動端就模糊了，因?yàn)檫@里存在一個 設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例 因此你的 canvas 設(shè)置的像素要比實(shí)際多出一些比如會有:

canvas.width = window.innerWidth * window.devicePixelRatio  

于是照著這個思路，輸出了 主域的 canvas 寬度 和 子域的 canvas 寬度，發(fā)現(xiàn) 子域的 sharedCanvas 并不是你預(yù)期的寬度，因此這個時候你需要手動的將它設(shè)置成你在 cocos creator 設(shè)置的畫布大小比如 750 * 1662 等；

if (typeof sharedCanvas !== 'undefined') {  
  sharedCanvas.width = 750
  sharedCanvas.height = 1662
}

大概完成后就不會有模糊的感覺了~