最近用(yong) Cocos Creator (cc) 開(kai)發微信小(xiao)游戲。由于(yu) 微信小(xiao)游戲存(cun)在(zai) 主域和子域的隔離(li)；

•  主(zhu)域(yu)，你的主(zhu)要游戲場景，和(he)一些交互按鈕(niu)等內(nei)容；

•  子域，主要用(yong)于獲取用(yong)戶數(shu)據和排行榜的顯(xian)示；

微信(xin)這樣分開也是(shi)為了更好(hao)地保護(hu)用戶數(shu)據(ju)，防止(zhi)數(shu)據(ju)泄露。因此(ci)一定(ding)要合(he)理的(de)(de)設(she)計(ji)自己的(de)(de)主域和子域；

凡是(shi)設計(ji)從微信里獲(huo)取數據(ju)的比(bi)如用戶頭(tou)像，游戲成(cheng)績等；一(yi)定(ding)需要在子(zi)域的canvas 完成(cheng)繪制(zhi)；

實(shi)際在完(wan)成排行(xing)榜(bang)的功能時候遇到(dao)了一點(dian)兼容(rong)性的問題(ti)，Android 的部(bu)分機型(自己(ji)這邊全部(bu)復(fu)現(xian))和 iOS 設備上存在畫布模糊(hu)的問題(ti):

ios 的截圖(tu)如下:

搜索了一(yi)下，發現沒有(you)多少人提出這樣的問題，但是看別(bie)的游戲也存在同(tong)樣的問題；

不過，靈機(ji)一(yi)動！！！

如(ru)果前端接觸 canvas 的話，才開始都(dou)會遇到一(yi)個(ge)問題，就是(shi)再 PC 上看著挺好的，但是(shi)在移(yi)移(yi)動端就模糊了，因(yin)為這里存在一(yi)個(ge) 設備上物理(li)像素和設備獨立像素(device-independent pixels (dips))的比例 因(yin)此你的 canvas 設置(zhi)的像素要比實際多(duo)出(chu)一(yi)些(xie)比如(ru)會有:

canvas.width = window.innerWidth * window.devicePixelRatio  

于是(shi)照(zhao)著這(zhe)個(ge)思(si)路(lu)，輸出了 主域的(de)(de) canvas 寬度 和(he) 子域的(de)(de) canvas 寬度，發現 子域的(de)(de) sharedCanvas 并不是(shi)你預期的(de)(de)寬度，因(yin)此這(zhe)個(ge)時(shi)候你需要(yao)手動的(de)(de)將它(ta)設(she)置(zhi)成你在 cocos creator 設(she)置(zhi)的(de)(de)畫布大小比如 750 * 1662 等；

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

大(da)概(gai)完(wan)成后(hou)就(jiu)不會有模糊的感覺(jue)了~