Question

我的问题是绘制线是即时的。

我想要的是非常缓慢地画线，差不多3-5秒才到达dy。出于某种原因，我无法让setTimeout()工作。我尝试过大小的值。

我只有一个基本的行示例，但是一旦我能够确定超时的工作原理，我将扩展这个概念以包括x和bezier lines。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function myLine(x, y, dx, dy) { //Line constructor
  this.x = x; //start x
  this.y = y; //start y
  this.dx = dx; //end x
  this.dy = dy; //end y
}
var line = new myLine(100, 5, 100, 100); //line object

function drawLine(myLine, context) { //Draw function
    context.moveTo(myLine.x, myLine.y);   
    animate(line, context);
  }
function animate(myLine, context) { //animation function
    if (myLine.y < myLine.dy) {
      myLine.y = myLine.y + 1;
      context.lineTo(myLine.dx, myLine.y);
      context.stroke();
      window.setTimeout(animate(line, context), 1000/60);
    }
}
drawLine(line, context);

Answer 1

实际上不你想做什么：计算机不做什么＆＃34;慢慢地＆＃34;，尤其不是在单线程的上下文中。你要做的是反复绘制 lot 行，其中每一行都比前一行略长。这样，看起来线条正在增长，你得到了你想要的东西：

function drawLine(x1,y1,x2,y2,ratio) {
  ctx.fillRect(0,0,300,300);
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  x2 = x1 + ratio * (x2-x1);
  y2 = y1 + ratio * (y2-y1);
  ctx.lineTo(x2,y2);
  ctx.stroke();
  // And if we intend to start new things after
  // this, and this is part of an outline, 
  // we probably also want a ctx.closePath()
}

function animate(ratio) {
  ratio = ratio || 0;
  drawLine(0,0,300,300,ratio);
  if(ratio<1) {
    requestAnimationFrame(function() {
      animate(ratio + 0.01);
    });
  }
}

animate();

正在运行代码：http://jsbin.com/hanaqahoyu/edit?html,js,output

另请注意，我们不想要使用setTimeout：为了确保流畅的动画，现代浏览器有requestAnimationFrame，当它充分利用时会触发感觉动画框架，非常方便：我们会使用它。

Answer 2

window.setTimeout将函数引用作为其第一个参数，您已将调用animate()的结果传递给undefined。这不会做太多。

一个简单的修复是匿名函数。

window.setTimeout(function () { animate(line, context); }, 1000/60);

更高级的方法是使用.bind()。

window.setTimeout(animate.bind(null, line, context), 1000/60);

此外，由于您正在使用动画，请考虑查看requestAnimationFrame。

Answer 3

另一种方法可能是使用requestAnimationFrame。看看下面的代码：

{{1}}

希望这有帮助。

慢慢动画一条简单的线条

3 个答案: