『壹』 js或者css有什麼辦法強制設置ipad橫屏顯示
對於移動端的輕量級 HTML5 互動小游戲（簡稱為 H5 輕互動)，如果從屏幕呈現模式來劃分的話，可以歸類為：豎屏式和橫屏式。
HTML5互動小游戲案例截圖
平常我們做過的需求里，主要是以豎屏式為主，而橫屏式較少。對於豎屏式場景來說，大家的經驗會比較豐富，因此，此次主要式探討下橫屏式場景下的一些需要注意的點，特別是怎樣去做橫屏適配。
對於 H5 輕互動游戲來說，要實現橫屏的話，主要是解決兩點：
1.無論用戶手持方向如何，都需要保證屏幕橫向顯示。
2.由於屏幕解析度的多樣化，因此就算是橫屏下也是需要進行橫屏適配，保證畫面在所有解析度下都能夠合理適配。
下面，我們針對這兩點分別闡述如何解決。
強制橫屏顯示
頁面內容顯示方向可分為豎排方向和橫排方向，如下圖所示。
頁面內容顯示方式：豎向排版和橫向排版
對於豎屏式 H5 輕互動來說，頁面會被期望保持豎排方向顯示。而如果頁面出現橫排方向顯示的情況，開發者往往會選擇利用提示蒙層來進行友好提示，讓用戶自主保持豎屏體驗，如下圖所示。
提示蒙層提醒用戶保持豎屏體驗
同樣地，在橫屏式 H5 輕互動游戲中可以採取相同的措施進行簡單處理，在頁面內容按豎排方向顯示時，開發者進行對用戶提示其保持橫屏體驗。
但是，這對用戶體驗並不友好，因為這對於那些習慣於打開鎖定為豎排方向功能（如下圖所示）的 iOS 平台用戶，或者是關閉屏幕旋轉功能（如下圖所示）的 Android 平台用戶來說，他們需要多一個處理步驟——先關閉豎排方向鎖定或是開啟屏幕旋轉，然後再橫向手持設備。
豎排方向鎖定功能（iOS）與屏幕旋轉（Android）功能
因此，更好的做法是強制橫屏顯示，對屏幕 resize 事件進行監聽，當判斷為豎屏時將整個根容器進行逆時針 CSS3 旋轉 90 度即可，代碼如下所示。
// 利用 CSS3 旋轉 對根容器逆時針旋轉 90 度var detectOrient = function() {var width = document.documentElement.clientWidth,height = document.documentElement.clientHeight,$wrapper = document.getElementById("J_wrapper"),style = "";if( width >= height ){ // 橫屏style += "width:" + width + "px;"; // 注意旋轉後的寬高切換style += "height:" + height + "px;";style += "-webkit-transform: rotate(0); transform: rotate(0);";style += "-webkit-transform-origin: 0 0;";style += "transform-origin: 0 0;";}else{ // 豎屏style += "width:" + height + "px;";style += "height:" + width + "px;";style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";// 注意旋轉中點的處理style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";}$wrapper.style.cssText = style;}window.onresize = detectOrient;detectOrient();
但是！這里有坑：如果你是採用 CreateJS 框架進行開發，那麼就不能通過 CSS3 途徑對包含 Canvas 的根容器進行旋轉處理，因為旋轉後會導致 Canvas 內的舞台元素的事件響應位置錯亂。
解決辦法是，換成利用 CreateJS 框架內的 Stage 的rotation屬性對整個舞台旋轉處理，代碼如下：
12345678910
if(self.isPortrait) { // 豎屏// 舞台旋轉self.stage.x = self.canvasHeight; // 注意：x偏移相當於旋轉中點處理，更簡單self.stage.rotation = 90;// more...}else { // 橫屏self.stage.x = 0;self.stage.rotation = 0;// more...}
橫屏適配處理
面對移動端多解析度繁復冗雜的情況，我們對於一般情況下（也就是常見的豎屏式）頁面適配處理可以說是爛熟於心，但是切換到橫屏式場景下，同樣的頁面適配方法可以直接應用嗎？會不會有什麼問題呢？
下面筆者分別從 DOM 和 Canvas 兩方面去著手闡述如何做橫屏適配處理。
解決 DOM 的橫屏適配問題
在移動端，常見的移動端適配方案是 REM 方案，而為了減少 JS 與 CSS 的耦合，筆者團隊開發頁面時採用的是 VW + REM 方案。（想要了解該方案的同學可詳細閱讀《利用視口單位實現適配布局》）。
因為頁面適配的場景往往是豎屏式的，因此 VW + REM 方案表現得十分完美。但是遇上橫屏式，它的缺點就暴露了出來。
現行的 vw 單位適配方案帶來的問題
如上圖所示，由於響應斷點的限制最大寬度處理，會導致頁面兩側留白，當然這可以通過去掉最大寬度限制來解決。而真正的缺點在於，由於 vw 單位的特性，適配換算大小是根據屏幕寬度而言的，因此屏幕寬度越大導致容器、文字會越大，還可能導致 DOM 元素超出屏幕外，且文字過大並不是我們所想要的用戶體驗。
那麼，換成 px 單位的固定布局如何？
但 px 單位的固定布局只適合於部分場景，對於需要內容全屏覆蓋的場景（如下圖所示），就可能存在這樣的不理想的用戶體驗：絕對定位的元素之間空隙過大，導致布局不美觀，又或者空隙過小，導致元素疊放被遮擋。
px單位固定布局適配方案帶來的問題
我們了解到，vw 單位的特點是適配換算大小時是根據屏幕寬度而定的，那麼在強制橫屏顯示時，我們就可以同理轉換為屏幕高度來而定，也就是 vw 單位替換成 vh 單位。
這樣進一步改良之後就會得到滿意的適配效果，如下圖所示。
更好的適配解決方案—— vw、vh 單位搭配
具體實現可參考如下 SCSS 代碼：
123456789101112
$vw_base: 375;$vw_fontsize: 20;html {font-size: 20px; //不支持vw單位時，回退到px單位font-size: ($vw_fontsize / $vw_base) * 100vw;}@media screen and (orientation: landscape) {html {font-size: 20px;font-size: ($vw_fontsize / $vw_base) * 100vh;}}
解決 Canvas 的橫屏適配問題
解決 Canvas 的橫屏適配問題，目前在實際應用中有兩種主流的方案：
通過做兩套Canvas的方案。
採用縮放的手段進行適配的方案。
- 採用了不同適配方案的案例
- Contain 模式下的縮放比例推導圖
兩套 Canvas 的方案的做法是，頁麵包含兩個 Canvas 分別用於橫豎屏時的相應顯示，但是它們的數據是打通的。但是，該方案難免會有局限性，比較適合游戲邏輯數據處理簡單、且舞台元素少且居中的場景；
而縮放適配方案做法是，採用的最為常見的縮放手段——利用 CSS3 Transform 的scale屬性，達到「一種設計尺寸適配多種解析度屏幕」的目的。
在市面上的一些成熟的主流 HTML5 游戲引擎，例如 Cocos2D、Laya、Egret 等等，它們本身就集成了橫屏適配的方案。如果你有去了解過，可以發現它們普遍都是採用縮放的理念進行適配。
但是，對於我們常用的 CreateJS、PixiJS 框架來說，它們並沒有配套的現成的橫屏適配解決方案可以被採用的，尤其是我們如果採用原生 Javascript 去開發一個橫屏游戲的時候。
因此，下面我們來研究下如何解決 Canvas 橫屏適配問題。
注意：下面文中示例代碼都是在 CreateJS 框架的基礎上進行編寫的。
選用合適的縮放模式
橫屏適配的核心是縮放，通過scale屬性等手法將Canvas縮放至適合屏幕窗口大小。類似於background-size屬性的表現，縮放適配也可以有很多種模式，或有裁剪或無裁剪，或根據長邊縮放或根據短邊縮放等等。根據一些常見的實際應用場景，有比較常用的五種縮放模式：Contain、Cover、Fill、Fixed-Width、Fixed-Height。根據游戲的不同的實際場景需求，我們可以選其中一種縮放模式進行適配。
下面，我們逐一解釋以上五種縮放模式的定義、實現與其適用的場景。
a. Contain模式
Canvas可以類比為一張圖，而圖片的適配，我們可以聯想到經常用以適配背景圖片的屬性background-size，其屬性值包括contain、cover。
藉助contain的概念，我們把縮放的其中一種模式稱為 Contain 模式。因為在這種模式下，舞台內容（gameArea）會保持寬高比進行縮放適配瀏覽器可視窗口（window），縮放至其能顯示完整的舞台內容。
根據下圖推導，我們可以得出在這種縮放模式下的縮放比例（scaleRadio），為瀏覽器可視窗口與游戲內容的寬度比或高度比之間較小者。
根據推導結論，簡單代碼實現如下：
1234567
// Contain模式核心原理函數CONTAIN: function(){var self = this;self.radioX = self.radioY = Math.min((self.winWidth / self.designWidth) , (self.winHeight / self.designHeight));self.canvasWidth = self.designWidth;self.canvasHeight = self.designHeight;}
可以看出，在 Contain 模式下，如果舞台內容寬高比與瀏覽器可視窗口的寬高比不相等時，舞台內容並沒有填滿整個瀏覽器可視窗口，此時就會出現上下或左右兩側會存在留空部分。
對於這種 Contain 模式，會比較適合舞台背景為純色或者是漸變類型的H5輕互動，舞台內容與窗口的緊鄰處得以自然過渡銜接，不會突兀。
b. Cover模式
『貳』 pixijs 怎麼修改背景顏色
快捷鍵OP-草圖-顏色-統一背景
『叄』 pixijs與threejs哪個好
如果是在windows下，就需要有： 1. python-2.6.msi (python運行庫,去太平洋下就行) 2. convert_obj_three.py (obj轉js腳本，也能下到，沒有的話我可以傳給你) 安裝好python2.6.msi 並保證 python convert_obj_three.py 和 model.obj（模型文件）..