ryf*_*059 6 javascript jquery html5 canvas
我正在制作一个动画画布网页.奇怪的是,每次我通过双击html文件启动网页时,画布几乎总是不正确的大小.我之前发过一个类似的问题:Canvas在加载时尺寸不正确但没有想要的答案.
经过大量调试后,我发现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文件在加载之前要求窗口的宽度,但我找不到可行的解决方案.有人能帮忙吗？
使用在窗口大小调整时触发的事件侦听器.这样你就不必在试图找到窗口完全初始化时做任何废话.它也会让你减少对状态的依赖,这是一个很好的奖励.
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
windowX = window.innerWidth;
windowY = window.innerHeight;
}
axl*_*l g -2
我遇到了类似的问题window.outerWidth，当从 read() 方法调用时，在某些浏览器上返回 0，我通过使用来解决它screen.width。我没有测试它，但我认为这screen.availWidth可以解决你的问题。
| 归档时间： |
|
| 查看次数： |
4936 次 |
| 最近记录： |