加载时画布尺寸不正确 [英] Canvas sizing incorrectly on loading

问题描述

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

I have a canvas webpage that functionally works but occasionally sizes incorrectly on start up. Says I have declared a canvas html tag like this:

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

我已经包含了一个javascript文件，它使用jquery来处理大小调整

And I have included a javascript file that takes care of the sizing using jquery

$(function() {
    var canvas = $('canvas')[0];

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

页面加载后偶尔会出现画布大小被挤压到一个非常小的区域，所有呈现的对象相互堆叠，如果我刷新，但这个问题不再存在。我使用inspect元素工具，发现当调整大小问题时，我有html代码

Occasionally after the page loads the canvas size is squeezed into a very small area and all objects rendered is stacked upon each other, if I refresh however this problem no longer persists. I use the inspect element tool and found that while the sizing problem happens I have the html code

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

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

Seems for some unknown reason the window.innerwidth is not acquired and the width is simply set to -10 and causes the problem. But the jquery declaration $(function(){}) should only execute after the page loads and I don't think I can use window.innerWidth just in the html tag. And I don't want to set the width to some other numerical value since this problem might as well happen again and I simply get that numerical width as my canvas width.

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

Anyway can tell me some fix? Thanks

推荐答案

如果你把它全部放在

$(document).ready(function()

函数？引用：

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

这篇关于加载时画布尺寸不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！