我試圖在畫布上製作一個飄落的雪花。該代碼在Chrome中可以正常工作，但在FF18中不顯示任何內容。在Firefox中畫布中的字符串出現異常錯誤

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;

來源

2013-02-09 Dharman

寬度和高度問題是由'body'的不需要的邊緣引起的。 – 2013-02-09 21:54:16

您是否試過使用簡單的星星而不是Unicode雪花？ – VisioN 2013-02-09 21:56:05

對不起，但星號沒有區別，仍然出現相同的錯誤 – Dharman 2013-02-09 21:59:53

移動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-09 22:08:04

它的工作，但我很驚訝你是如何解決它 – Dharman 2013-02-09 22:13:01

@Dharman - 這是一個[有用的網站]（http://www.netmagazine.com/tutorials/javascript-debugging-beginners）關於調試。 – 2013-02-09 22:17:29

問題是您的代碼的順序。

你打電話的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);

ÿ未定義，並導致您的錯誤。

來源

2013-02-09 22:13:49

在Firefox中畫布中的字符串出現異常錯誤

回答

獎勵：調試

相關問題