2017-08-05 64 views
0

我希望有人可以解釋下面的函數表達式是如何工作的。參數'p'沒有被分配一個值,但是它被用在函數的主體中用於計算(定義「角度」和「尾部」變量),並在調用draw()時作爲參數對象。當你瀏覽代碼時,你可以看到參數'p'確實有一個值(見附圖) - 但我不明白這個值來自哪裏。請注意,在查看完整代碼後,其他地方均未提及「p」。功能表達式參數沒有賦值,但有一個值

當您登錄「P」你看到下面的值,它繼續增加,因爲應用程序的控制檯上運行: Image of console.log(p);

以下是完整的函數表達式和函數調用:

var draw = function(p) {  
    $.fillStyle = "hsla(38,5%,12%,.90)"; 
    $.fillRect(0, 0, w, h);  
    $.fillStyle = "hsla(38, 25%, 90%, 1)";  
    $.strokeStyle = "hsla(38, 25%, 90%, 1)"; 
    for (var i = 0; i < numh; i++) 
    for (var j = 0; j < numw; j++) { 
     var diagnalW = j * spacing + 
     (i % 2 ? 0 : spacing/2); 
     var diagnalH = i * spacing; 
     var arr = [position[0] - diagnalW, 
      position[1] - diagnalH 
     ], 
     wave = Math.sqrt(arr[0] * arr[0] + 
      arr[1] * arr[1]), 
     arr = [arr[0]/wave, arr[1]/wave], 
     angle = 50 * (Math.cos(p/360 - wave/105) - 1); 
     $.beginPath(); 
     $.arc(diagnalW + arr[0] * angle, diagnalH + 
     arr[1] * angle, 2.8, 0, 2 * Math.PI, false); 
     $.closePath(); 
     $.fill(); 
     for (var n = 0; n < 5; n++) { 
     var tail = 50 * (Math.cos((p - 50 * n)/
      360 - wave/105) - 1); 
     $.beginPath(); 
     $.moveTo(diagnalW + arr[0] * angle, diagnalH + 
      arr[1] * angle); 
     $.lineWidth = 5 - n; 
     $.lineTo(diagnalW + arr[0] * tail, diagnalH + arr[1] * tail); 
     $.stroke() 
     } 
    } 
}; 

var anim = function(p) { 
    window.requestAnimationFrame(anim); 
    draw(p); 
}; 
anim(); 

我瞭解有關此代碼的所有內容,但'p'如何獲取控制檯中顯示的值除外。另外 - 如果不清楚,這是一個html5畫布應用程序。

(旁註:沒有,$在上面沒有的jQuery這正是原作者使用她的畫布上下文對象。)

回答

2

第一調用drawp將有值undefined,因爲anim()未通過p的值,因此anim在調用draw時使用p

,雖然,draw是由瀏覽器調用,而不是通過代碼,因爲它被用作回調requestAnimationFrame後。瀏覽器會用高分辨率的定時器值調用它,這就是你在p中看到的。

+0

哦!這很有道理。非常感謝。對於之前關於我的帖子的所有疑惑,抱歉。不幸的是,我不能滿足你的回答,因爲這是一個新帳戶,但你的答案是非常棒的。再次感謝! – Michelle

+0

@Michelle:很高興幫助!幾分鐘後,你可以接受一個答案(我的或Nina的,或者如果發佈更好的答案......)。更多[here](/ help/someone-answers)。 –

+1

會做!再次感謝! – Michelle

2

pwindow.requestAnimationFrame

的參數回調的參數指定功能時,它的時間來更新你的動畫在未來重新繪製調用。該回調有一個參數DOMHighResTimeStamp,它表示當​​開始觸發回調時的當前時間(從performance.now()返回的時間)。

+0

非常感謝。這個答案與上面T.J.的答案一致。非常感謝。 – Michelle