帆布 - 请在画布上的圆特定时间

Question

下移我想创建一个圆ctx.arc(10, 10, 15, 0, Math.PI*2, true);，从而使其向下流动，而不会失去它的踪迹.. 你可以看到这显然是在下面的图片 -

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

编辑：对不起有些朋友的问题是：什么是最有效的，“无记忆占用”的方法来做到这一点，（我知道有这种循环方法，但它的内存占用方法）

Answer 1

的Javascript知道setTimeout(fn, ms)，这将会给定的毫秒数后致电给定函数。但是，浏览器需要一些时间才能呈现您的绘图，并且当您想要显示2秒时，您将不得不观看您的帧/秒速率。

这也是一个新的specification draft叫​​，见http://paulirish.com/2011/requestanimationframe-for-smart-animating/。

Answer 2

你可以绘制顶部半圆，a矩形和底部半圆。你可以计算出多少应该在一个特定的时刻与下移：

(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();