这行代码为什么要乘以0.002：new Date().getTime() * 0.002;

Question

下面的代码中乘以0.002有什么特殊用途吗？

var time = new Date().getTime() * 0.002;

此代码摘录自此处。我还提供了下面的完整代码：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();
var canvas, context;

init();
animate();

function init() {

canvas = document.createElement( 'canvas' );
canvas.width = 256;
canvas.height = 256;

context = canvas.getContext( '2d' );

document.body.appendChild( canvas );

}

function animate() {
    requestAnimFrame( animate );
    draw();
}

function draw() {
    var time = new Date().getTime() * 0.002;
    var x = Math.sin( time ) * 96 + 128;
    var y = Math.cos( time * 0.9 ) * 96 + 128;

    context.fillStyle = 'rgb(245,245,245)';
    context.fillRect( 0, 0, 255, 255 );

    context.fillStyle = 'rgb(255,0,0)';
    context.beginPath();
    context.arc( x, y, 10, 0, Math.PI * 2, true );
    context.closePath();
    context.fill();
}

Answer 1

该代码使用 Math.sin( time ) * 96 + 128 作为 x 坐标，使用 Math.cos( time * 0.9 ) * 96 + 128 作为 y 坐标协调。如果 time 是毫秒数（如 new Date().getTime() 所示），那么 x 坐标和 y 坐标都会随着每个连续的时间而剧烈波动呼叫，这个点似乎不会“移动”，而是“任意跳跃”——每秒六十次，速度比眼睛跟踪它的速度快。将毫秒数乘以 0.002 会导致点的 x 和 y 坐标以更平滑的方式振荡，其方式（在人眼看来）就像运动一样。

Answer 2

var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 96 + 128;
var y = Math.cos( time * 0.9 ) * 96 + 128;

getTime 方法返回的值是自 1970 年 1 月 1 日以来的毫秒数。该值用于计算圆的下一个 x 和 y 坐标。

Answer 3

该值控制绘制圆圈的位置（作为当前时间的一部分）。数字越小，动画显示越慢（并且更清晰） - 对于较大的数字，反之亦然。

您可以通过单击 jsFiddle 小部件右上角的加号图标来玩该数字 - 这将带您进入 jsFiddle 站点，您可以在其中编辑和运行 javascript。

注意 - 看起来有问题的脚本与 IE 9 不兼容 - 在 FF 中工作正常，但尚未测试任何其他浏览器...