javascript - 在HTML5 Canvas 上慢慢绘制二次曲线

Question

我们有一个点数组，我们想通过这些点在 HTML5 Canvas 上绘制一条二次曲线，但我们想慢慢地绘制曲线，而不是一次全部绘制。有点像重放曲线的绘制。

原始曲线:http://jsfiddle.net/NWBV4/12/

曲线回放:http://jsfiddle.net/NWBV4/15/

在曲线回放中，如果我们将 SEGMENT_PER_POINTS 更改为非常大的值(例如 1000)，它会在一次拍摄中完美绘制。

但如您所知，数字越小，曲线的重播就会出现间隙。

关于我们如何解决这个问题的任何线索？我们被困住了!

Answer 1

您应该在绘图代码中添加 sleep 基元。然而，在 javascript 中，这不是使用 sleep 或等待原语，而是使用 setInterval 或 setTimeout 以事件导向的方式完成。如图所示:

var sec = 1000; // milliseconds

var totalDrawingTime = 5*sec;
var numPointsToDraw = [calculate this];
var waitTimePerPoint = totalDrawingTime/numPointsToDraw;

function slowlyDrawCurve(...) {
    var x = ...;

    function drawNextPointAndWait() {
        x += ...;
        if (x < MAX_CANVAS_SIZE) {
            y = f(x);
            point = [x,y];
            dispatch_to_canvas_function(point);
            setTimeout(helper, waitTimePerPoint);
        }
    }
    drawNextPointAndWait();
}

编辑

此处演示:http://jsfiddle.net/eJVnU/4/

这实际上更有趣一点。也就是说，如果您以几毫秒的间隔进行绘制(1000 点意味着每次更新 1 毫秒!)，您需要小心处理 javascript 的计时器。使用 setTimeout 安排的 javascript 事件可能会在几毫秒或更长时间内不触发，这使它们变得不可靠!因此，我所做的是弄清楚每个部分应该在什么时候完成。如果我们比计划提前几毫秒，我们会执行 setTimeout，但是，如果我们落后于计划，我们会直接执行对分段绘制例程的递归调用，快捷方式事件处理系统。这也确保了绘制对于人眼来说是平滑的，只要线段的长度大致相等。

(如果你想让它完成得更顺利，你可以计算绘制的线段的长度，保留绘制的弧长总和，然后将其除以某个固定的恒定速率 arclength_per_second 来计算事情应该花多长时间。)