畫布無法在移動設備上顯示

Question

HTML5畫布（僅使用drawImage函數）沒有出現在移動設備上，而是出現在我的筆記本電腦上。

你可以在這里看到： mmhudson.com/index.html （重裝一次）

我沒有得到任何錯誤或任何錯誤，但它不會在iOS上的chrome或android上的默認瀏覽器中顯示。

編輯：

僅當文檔中包含以下元標記時，才會出現此問題：

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

Answer 1

您的init()函數由imgLoad()調用，但只有在窗口寬度大於或等於480px時才加載圖像：

        window.onload = function(){
            s.dL = true;
            s.width = window.innerWidth;
            s.height = window.innerHeight;


            if(s.width < 320){
                //too small
            }
            else if(s.width >= 320 && s.width < 480){
                s.scWidth = 296;

            }
            else{
                s.scWidth = 456;
                b_border.src = "res/480/b_border.png";
                r_border.src = "res/480/r_border.png";
                l_border.src = "res/480/l_border.png";
                t_border.src = "res/480/t_border.png";
                br_corner.src = "res/480/br_corner.png";
                tr_corner.src = "res/480/tr_corner.png";
                bl_corner.src = "res/480/bl_corner.png";
                tl_corner.src = "res/480/tl_corner.png";
                h_wall.src = "res/480/h_wall.png";
                v_wall.src = "res/480/v_wall.png";
                box.src = "res/480/box.png";
                crosshair.src = "res/480/crosshair.png";
                player1.src = "res/480/player1.png";
                player2.src = "res/480/player2.png";
            }
        }

省略元視口標記時，瀏覽器假定頁面/窗口寬度為980px，因此代碼正常運行。

當您包含width=device-width的元視口標記時，瀏覽器imgLoad()頁面/窗口寬度設置為屏幕寬度（例如iPhone上的320px），因此永遠不會調用imgLoad()和init() 。

Answer 2

看起來您正在嘗試在加載之前繪制圖像。 我不確定為什么移動瀏覽器會更頻繁地失敗，可能它們加載速度較慢？

事實上，當我在桌面上打開你的頁面時，有時畫布不會繪制，但是如果我打開控制台並輸入draw()它會出現（因為那時圖像已經加載）。

如果您只處理一個圖像，簡化的代碼將是：

var img = new Image();

img.onload = function(){ 

    // drawing code goes here

}

img.src = 'myfile.png';

但是由於你有大量的圖像，我會查看某種資源加載庫。