加载时画布尺寸不正确

时间:2012-07-25 06:23:35

标签: javascript html5 canvas

我有一个功能正常的画布网页,但偶尔在启动时尺寸不正确。 说我已经宣布了一个像这样的canvas html标签:

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

我已经包含了一个javascript文件,它使用jquery

来处理大小调整
$(function() {
    var canvas = $('canvas')[0];

    var DISPLAY_WIDTH = window.innerWidth-10,
        DISPLAY_HEIGHT = 620,

有时在页面加载后,画布大小被挤压到一个非常小的区域,所有渲染的对象都相互堆叠,如果我刷新,则此问题不再存在。我使用了inspect元素工具,发现当调整大小问题时,我有html代码

<canvas id="main_canvas" width="-10" height="620"></canvas>

由于某些未知原因,似乎未获取window.innerwidth且宽度仅设置为-10并导致问题。但是jquery声明$(function(){})应该只在页面加载后执行,我不认为我只能在html标记中使用window.innerWidth。而且我不想将宽度设置为其他数值,因为这个问题可能会再次发生,我只是将数字宽度作为我的画布宽度。

无论如何可以告诉我一些修复?谢谢

1 个答案:

答案 0 :(得分:0)

如果你把所有内容都放在

中怎么办?
$(document).ready(function()

功能?引用:

  

在DOM加载之前和之前,它内部的所有内容都会加载   页面内容已加载。   (来源:http://www.learningjquery.com/2006/09/introducing-document-ready