6

アニメーション用のキャンバス Web ページを作成しています。奇妙なことは、html ファイルをダブルクリックして Web ページを起動するたびに、ほとんどの場合、キャンバスのサイズが正しくないことです。以前に同様の質問を投稿しました:ロード時にキャンバスのサイズが正しくありませんが、希望する回答がありません。

大規模なデバッグの後、私にそのような問題を引き起こしているのはそれであることがわかりましたwindow.innerWidth。はwindow.innerWidth、html ファイルをダブルクリックしてページが起動されるたびに 0 を返し、キャンバス サイズが正しくありません (興味深いことに、キャンバス サイズは正確に 0 ではありませんが、レンダリングされるオブジェクトが互いに重なり合う非常に小さいサイズです)。 、しかし、ページをリロードした後 (Ctrl+R)、問題は発生しなくなりました。私はjQueryを使用してページをロードしています。これが私のコードです:

html:

    <body>
        <canvas id="main_canvas"></canvas>
    </body>

js:

    $(document).ready(function() {

        var SCREEN_WIDTH = window.innerWidth-10,
            SCREEN_HEIGHT = window.innerHeight-10;

        if (window.innerWidth === 0) { alert("wtf? width = 0?");}

        var canvas = $('canvas')[0],
            context;

        init(); // use $(window).load(init) does not fix the problem

        function init() {

            if (canvas.getContext) {

                context = canvas.getContext('2d');
        animate(); // draw stuff
            }

            else {
                alert('Your browser does not support html5 canvas');
            }
        }
});

ここでわかるように、私はすでに$(docuemnt).ready(function())ロードされていることを確認するために使用していますが、リンクhttp://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/から、著者はドキュメントがすべてのグラフィックスがまだロードされていなくても、HTML ドキュメントがロードされ、DOM の準備が整った時点で ready イベントが実行されます。

一方、$(window).load(function())すべてのフレーム、オブジェクト、および画像を含む完全なページが完全に読み込まれると、少し遅れて が実行されます。したがって、画像やその他のページ コンテンツに関係する関数は、ウィンドウの load イベントまたは content タグ自体に配置する必要があります。しかし、これを使用しても問題は解決しません。

ロードする前に js ファイルがウィンドウの幅を要求しているのかもしれませんが、実行可能な解決策が見つかりません。誰でもこれを手伝ってもらえますか？

4

2 に答える 2

6

ウィンドウのサイズ変更でトリガーされるイベント リスナーを使用します。そうすれば、ウィンドウが完全に初期化されるタイミングを見つけようとして、ナンセンスなことをする必要がなくなります。また、状態への依存度が低くなり、これは素晴らしいボーナスです。

window.addEventListener( 'resize', onWindowResize, false ); 
function onWindowResize() {
    windowX = window.innerWidth;
    windowY = window.innerHeight;
}
于 2016-01-11T23:38:08.770 に答える
-2

window.outerWidthいくつかのブラウザでready（）メソッドから呼び出されたときに0が返されるという同様の問題があり、screen.width代わりにを使用して解決しました。私はそれをテストしませんでしたが、それscreen.availWidthはあなたの問題を解決すると思います。

于 2012-07-30T12:41:39.347 に答える