0

我希望有人可以解释下面的函数表达式是如何工作的。参数 'p' 没有被赋值，但它在函数体中用于计算（定义“角度”和“尾巴”变量），并在调用 draw() 时用作参数对象。当您单步执行代码时，您可以看到参数“p”确实有一个值（见附图） - 但我不明白该值来自哪里。请注意，在查看完整代码后，不会在其他任何地方注明“p”。

当您将“p”记录到控制台时，您会看到以下值，随着应用程序的运行，这些值会继续增加： 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。这只是原作者用于她的画布上下文对象的东西。）

4

2 回答 2

2

在第一次调用时draw，p将有值undefined，因为anim()没有传递值p，anim然后p在调用时使用draw。

但是，在那之后，draw由浏览器调用，而不是由该代码调用，因为它被用作requestAnimationFrame. 浏览器将使用高分辨率计时器值调用它，这就是您在p.

于 2017-08-05T15:45:43.667 回答
2

p是回调的参数window.requestAnimationFrame

一个参数，指定在为下一次重绘更新动画时要调用的函数。回调有一个单独的参数 a ，它指示开始触发回调DOMHighResTimeStamp的当前时间（从 返回的时间performance.now()） 。requestAnimationFrame

于 2017-08-05T15:45:51.490 回答