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

【问题标题】：Canvas - Make a circle in canvas move down in particular timeCanvas - 使画布中的圆圈在特定时间向下移动
【发布时间】：2012-01-28 02:28:18
【问题描述】：

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

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

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

【问题讨论】：

@Howard 哥们，更新问题
你所说的“这个循环方法”是什么意思，为什么你认为它是“内存占用”？你能告诉我们你到目前为止的代码吗？

标签： javascript html animation canvas html5-canvas

【解决方案1】：

Javascript 知道setTimeout(fn, ms)，它将在给定的毫秒数后调用给定的函数。但是，浏览器需要一些时间来渲染您的绘图，并且当您想要 2 秒的时间时，您必须注意您的帧/秒速率。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

请使用this shim，不是每个人都使用webkit。