4

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

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

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

编辑：

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

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

2 回答 2

3

您的init()函数由 调用imgLoad()，但仅当窗口宽度大于或等于 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()不会被调用。

于 2013-02-04T15:34:26.773 回答
0

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

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

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

var img = new Image();

img.onload = function(){ 

    // drawing code goes here

}

img.src = 'myfile.png';

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

于 2013-01-30T09:47:50.847 回答