Question

我有一个功能正常的画布网页，但偶尔在启动时尺寸不正确。说我已经宣布了一个像这样的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。而且我不想将宽度设置为其他数值，因为这个问题可能会再次发生，我只是将数字宽度作为我的画布宽度。

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

Answer 1

如果你把所有内容都放在

中怎么办？

$(document).ready(function()

功能？引用：

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

加载时画布尺寸不正确

1 个答案: