Question

我正在为动画创建一个画布网页。奇怪的是，每次我通过双击html文件启动网页时，画布几乎总是不正确的大小。我之前发布了一个类似的问题：Canvas sizing incorrectly on loading但没有得到满意的答案。

经过大量调试后，我发现window.innerWidth给了我这样的麻烦。每次从双击html文件启动页面时，window.innerWidth返回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。

另一方面，$(window).load(function())稍后在完整加载完整页面时执行，包括所有帧，对象和图像。因此，涉及图像或其他页面内容的功能应该放在窗口或内容标签本身的加载事件中。但即使我用这个问题也没有解决。

也许js文件在加载之前要求窗口的宽度，但我找不到可行的解决方案。任何人都可以帮忙吗？

Answer 1

使用在窗口大小调整时触发的事件侦听器。这样你就不必在试图找到窗口完全初始化时做任何废话。它也会让你减少对国家的依赖，这是一个很好的奖励。

window.addEventListener( 'resize', onWindowResize, false ); 
function onWindowResize() {
    windowX = window.innerWidth;
    windowY = window.innerHeight;
}

Answer 2

我遇到了window.outerWidth的类似问题，当从ready（）方法调用时，在某些浏览器上返回0，而我使用screen.width来解决它。我没有测试它，但我认为screen.availWidth可以解决你的问题。

window.innerWidth = 0？

2 个答案: