奖励：调试

Question

我试图在帆布上下雪。该代码在Chrome中正常运行，但在FF18中没有显示任何内容。

当我在控制台中检查它时，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;

Answer 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()之前定义变量，所以我只是将它移到底部并且它可以工作。

Answer 2

问题在于您的代码顺序。

在设置这些变量

之前，调用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未定义并导致错误。

Firefox中画布中字符串的异常错误

2 个答案:

奖励：调试