移动设备上无法显示画布(Canvas)

Question

在移动设备上，只使用drawImage函数的HTML5画布无法显示，但在我的笔记本电脑上可以显示。

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

我没有收到任何错误信息，但它在iOS上的Chrome浏览器或Android上的默认浏览器中都无法显示。

编辑：

只有在文档中包含以下meta标签时才会出现此问题：

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

- Max Hudson

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

当您省略meta viewport标签时，浏览器会认为页面/窗口宽度为980px，因此您的代码可以正常运行。

当您使用带有width=device-width的meta viewport标签时，浏览器会将页面/窗口宽度设置为屏幕宽度（例如iPhone上的320px），因此imgLoad()和init()将不会被调用。

- Jeffery To

Answer 2

看起来你正在尝试在图片加载之前绘制它们。我不确定为什么移动浏览器会更容易失败，可能是因为它们加载所有图片的速度较慢？

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

如果你只处理单个图像，简化后的代码将是：

var img = new Image();

img.onload = function(){ 

    // drawing code goes here

}

img.src = 'myfile.png';

但是由于您在此处拥有大量的图像，我建议您考虑使用某种资源加载库。

- beeglebug

---

我最终会做到的。这就是我在问的。我知道图片必须在显示之前下载...但是图片确实在手机上下载了，然后没有显示。请参见编辑。 - Max Hudson

如果你alert s.width，你会得到什么？viewport标签可能会影响画布的宽度。在绘制之前，还可以尝试警报document.getElementById("canvasCont").style.width以确保它具有宽度。 - beeglebug

画布是否有显示？如果对画布执行一些不依赖于图像的操作，例如用纯色填充它，那么能显示出来吗？ - beeglebug

是的。画布已经存在，JS也可以正常工作并正确调整画布大小。只是当该元标签存在时，没有图像显示。 - Max Hudson