画布 - 使画布中的圆圈在特定时间向下移动

Question

我想创建一个圆ctx.arc(10, 10, 15, 0, Math.PI*2, true);，然后让它向下流动而不会丢失它的痕迹。 您可以在下图中清楚地看到这一点 -

在这里，我们可以看到黑暗的一面......圆圈实际上随着时间的推移而移动..我想通过输入时间来控制速度......就像从上到下它应该在2秒内到达（或其他一些方法来控制其流速）

编辑：对不起，对于一些好友问题是：最高效和“非内存占用”方法是做什么的，（我知道有这种循环方法，但它的内存占用方法）

Answer 1

您可以绘制顶部半圆，矩形和底部半圆。您可以计算在特定时刻应该向下移动多少：

(Date.now() - startTime) / t * (y2 - y1)

其中t是完整移动所需的时间。

http://jsfiddle.net/eGjak/231/

var ctx = $('#cv').get(0).getContext('2d');

var y1 = 100,  // start y
    y2 = 300,  // end y
    x  = 200,  // x
    r  = 50,   // radius
    t  = 2000; // time

var dy = y2 - y1, // difference in y
    pi = Math.PI,
    startTime = Date.now();

var f = function() {
    var y = y1 + (Date.now() - startTime) / t * dy;

    ctx.beginPath();
    ctx.arc(x, y1, r, pi, 0); // top semicircle
    ctx.rect(x - r, y1, r * 2, y - y1); // rectangle
    ctx.arc(x, y, r, 0, -pi); // bottom semicircle
    ctx.fill();

    if(y < y2) { // if should be moved further
        webkitRequestAnimationFrame(f);
    }
};

f();

Answer 2

Javascript知道setTimeout(fn, ms)，它会在给定的毫秒数后调用给定的函数。但是，浏览器需要一些时间来渲染您的绘图，当您希望2秒钟时，您将需要观察帧/秒速率。

还有一个名为requestAnimationFrame的新specification draft，请参阅http://paulirish.com/2011/requestanimationframe-for-smart-animating/。