javascript - HTML Canvas 仅在浏览器调整大小后触发？

Question

我有一些不错的 JS，可以使用 HTML canvas 创建掉落的五彩纸屑——但它只会在您调整浏览器大小时开始绘制:

http://jsfiddle.net/JohnnyWalkerDesign/pmfgexfL/

调整大小之前:

调整大小后:

这是为什么？

Answer 1

您的 Canvas 宽度仅在 resizeWindow(); 函数内设置。

尝试在函数定义之后直接添加 resizeWindow();:

resizeWindow = function() {
    window.w = canvas.width = window.innerWidth;
    return window.h = canvas.height = window.innerHeight;
};

resizeWindow();

否则在调整页面大小之前不会调用它。

http://jsfiddle.net/pmfgexfL/3/

您的 window.onload 不会被调用，因为它在 confetti() 中。

编辑: 正如 fuyushimoya 指出的那样，还删除了 window.w = 0; 和 window.h = 0; 行，因为它们'不需要。我认为如果您想做一些更自定义的事情，在调整大小的函数中设置大小(就像您所做的那样)实际上更清晰，但您也需要调用它进行初始化。

http://jsfiddle.net/pmfgexfL/5/