我正在为动画制作 Canvas 网页。奇怪的是，每次我通过双击 html 文件启动网页时， Canvas 几乎总是大小不正确。我之前发过类似的问题:Canvas sizing incorrectly on loading但没有想要的答案。
经过大量调试后，我发现是 window.innerWidth 给我带来了这样的麻烦。 window.innerWidth 每次通过双击 html 文件启动页面并导致 Canvas 大小不正确时返回 0(有趣的是 Canvas 大小不完全为 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 文件在加载之前要求窗口的宽度，但我找不到可行的解决方案。有人可以帮忙吗？
最佳答案
使用在窗口调整大小时触发的事件监听器。这样一来，您就不必费力地寻找窗口何时完全初始化。它还会让你减少对状态的依赖，这是一个很好的奖励。
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
windowX = window.innerWidth;
windowY = window.innerHeight;
}
关于javascript - window.innerWidth = 0?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11721064/