Question

我们有一个点数组，我们希望在HTML5画布上绘制二次曲线，但我们想慢慢绘制曲线，而不是一次全部绘制。有点像重播曲线的绘图。

在曲线重放中，如果我们将SEGMENT_PER_POINTS更改为非常大的值（例如1000），则可以一次性完美绘制。

但正如您所知，数字较小，曲线的重播存在差距。

我们如何解决这个问题的任何线索？我们很困难！

Answer 1

您应该在绘图代码中添加一个sleep原语。但是在javascript中，而不是使用sleep或wait原语，这是通过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的总和，并将其除以某个固定的恒定速率arclength_per_second来计算出事物的长度应该采取。）

在HTML5画布上慢慢绘制二次曲线

1 个答案: