0

在下面的代码中乘以 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();
}
4

3 回答 3

3

该代码Math.sin( time ) * 96 + 128用作 x 坐标和Math.cos( time * 0.9 ) * 96 + 128y 坐标。如果time是毫秒数（原样new Date().getTime()），那么 x 坐标和 y 坐标都会随着每次连续调用而剧烈摇摆，并且点似乎不会“移动”，而是“任意跳跃” - 六十次第二，比眼睛跟踪它的速度更快。将毫秒数乘以 0.002 会导致点的 x 和 y 坐标以更平滑的方式振荡，其方式（在人眼看来）类似于运动。

于 2011-11-30T04:40:27.780 回答
1 
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 坐标。

于 2011-11-30T04:36:45.883 回答
0

该值将绘制圆的位置控制为当前时间的一小部分。数字越小，动画出现的速度越慢（并且更清晰） - 数字越大，反之亦然。

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

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

于 2011-11-30T04:59:49.230 回答