Question

HTML5 canvas（仅使用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添加元视口标记时，浏览器会将页面/窗口宽度设置为屏幕宽度（例如iPhone上的320px），因此imgLoad()和{{1}永远不会被召唤。

Answer 2

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

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

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

var img = new Image();

img.onload = function(){ 

    // drawing code goes here

}

img.src = 'myfile.png';

但是由于你在这里有大量的图像，我会查看某种资源加载库。

画布无法在移动设备上显示

2 个答案: