画布不显示在移动设备上

Question

HTML5 画布（仅使用 drawImage 函数）未显示在移动设备上，但在我的笔记本电脑上。

你可以在这里看到：mmhudson.com/index.html（重新加载一次）

我没有收到任何错误或任何错误，但它不会在 iOS 上的 chrome 或 android 上的默认浏览器中显示..

编辑：

仅当文档中包含以下元标记时才会出现此问题：

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

Answer 1

imgLoad() 调用了您的 init() 函数，但您仅在窗口宽度大于或等于 480 像素时才加载图像：

        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";
            }
        }

当您省略元视口标签时，浏览器假定页面/窗口宽度为 980 像素，因此您的代码可以正常运行。

当您包含带有width=device-width 的元视口标签时，浏览器会将页面/窗口宽度设置为屏幕宽度（例如，iPhone 上为 320 像素），因此永远不会调用 imgLoad() 和 init()。

Answer 2

看起来您正试图在图像加载之前绘制它们。我不确定为什么移动浏览器会更频繁地失败，可能它们加载它们的速度较慢？

实际上，当我在桌面上打开您的页面时，有时画布不会绘制，但如果我打开控制台并输入draw()，它就会出现（因为那时图像已经加载）。

如果您只处理单个图像，则简化代码为：

var img = new Image();

img.onload = function(){ 

    // drawing code goes here

}

img.src = 'myfile.png';

但是由于这里有大量图像，我会研究某种资源加载库。