6

我正在为动画制作画布网页。奇怪的是，每次我通过双击 html 文件启动网页时，画布的大小几乎总是不正确。我之前发布过一个类似的问题：Canvas sizing wrong on loading but has no desired answer。

经过大量调试后，我发现正是它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())当整个页面（包括所有框架、对象和图像）完全加载时，它会稍后执行。因此，涉及图像或其他页面内容的函数应放置在窗口或内容标签本身的加载事件中。但即使我使用这个问题也没有解决。

也许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 回答