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()関数は によって呼び出されますが、ウィンドウの幅が480pximgLoad()以上の場合にのみ画像を読み込んでいます。

        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()、 andinit()は呼び出されません。

于 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 に答える