0

我试图在画布上制作飘落的雪花。该代码在 Chrome 中运行正常，但在 FF18 中没有显示任何内容。

http://dharman.eu/flakes/

当我在控制台中检查它时，Firebug 抛出此错误：
指定了无效或非法字符串
var s = flakes[flake].chara;
ctx.fillText(s,flakes[flake].x, flakes[flake].y);

任何想法我的代码有什么问题？

此外，画布元素的宽度似乎太大，即使它被指定为 100%。为什么？

var screenH = window.innerHeight;
var screenW = window.innerWidth;
canvas.width = screenW;
canvas.height = screenH;
4

2 回答 2

1

移动init();到代码的底部，然后它将起作用：

//...

$('#canvas').dblclick(function () {
    RunPrefixMethod(canvas, "RequestFullScreen");
});

//width/height 100%
var screenH = window.innerHeight;
var screenW = window.innerWidth;
canvas.width = screenW;
canvas.height = screenH;

init();  //<--here

因为screenH没有定义。（奇怪的...）

演示：http: //jsfiddle.net/DerekL/jNf47/

奖励：调试

首先，我知道其中一个变量ctx.fillText没有定义，所以我必须找出它是哪一个：

console.log(s,flakes[flake].x, flakes[flake].y);
//[some number], [some number], undefined)

所以问题出在flakes[flake].y. 似乎flakes[flake].y是指screenH，所以这意味着screenH是问题所在。通常变量必须在调用之前定义init()，所以我只是将它移到底部并且它可以工作。

于 2013-02-09T22:08:04.327 回答
0

问题是您的代码的顺序。

您调用 init() 在设置这些变量之前开始运行动画

var screenH = window.innerHeight;
var screenW = window.innerWidth;

然后在 drawFlakes 循环中，您尝试将薄片 y 值分配给 screenH （未定义）

else
{   
  flakes[flake].y=screenH;
  flakes[flake].die-=33;
}

然后最后在渲染薄片时

ctx.fillText(s,flakes[flake].x, flakes[flake].y);

y 未定义并导致错误。

于 2013-02-09T22:13:49.890 回答