Question

在以下代码中乘以0.002有什么特殊目的吗？

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

此代码摘录摘自here。我也在下面提供了完整的代码：

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坐标都会随着每次连续调用而疯狂地摇摆，并且点似乎不会“移动”，而是“任意跳跃” - 每秒60次，比眼睛跟踪速度快。将毫秒数乘以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中可以正常使用，但是没有测试任何其他浏览器......

为什么在这行代码中乘以0.002：new Date（）。getTime（）* 0.002;

3 个答案: