Медленно нарисуйте квадратичную кривую на холсте HTML5

Question

У нас есть массив точек, через которые мы хотели бы нарисовать квадратичную кривую на холсте HTML5, но мы хотели бы нарисовать кривую медленно, а не все сразу. Вроде как воспроизводить рисунок кривой.

Исходная кривая: http://jsfiddle.net/NWBV4/12/

Воспроизведение кривой: http://jsfiddle.net/NWBV4/15/

В режиме повтора кривой, если мы изменим SEGMENT_PER_POINTS на что-то очень большое (например, 1000), оно отлично отрисовывается за один выстрел.

Но, как вы можете сказать, с меньшими числами в воспроизведении кривой есть пробелы.

Есть какие-нибудь подсказки о том, как мы можем это исправить? Мы довольно застряли!

Answer 1

Вы должны добавить примитив сна в свой код рисования. Однако в javascript, а не с примитивами сна или ожидания, это достигается направленным на событие способом с 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. События javascript, запланированные с setTimeout, могут не срабатывать в течение нескольких миллисекунд или более, что делает их ненадежными! Поэтому я выяснил, когда каждый сегмент должен быть завершен. Если мы работали с опережением графика более чем на несколько миллисекунд, мы выполняли setTimeout, НО, если мы в противном случае отставали от графика, мы напрямую выполняли рекурсивный вызов подпрограммы рисования сегмента, сокращая систему обработки событий , Это также гарантирует, что рисование выполняется гладко для человеческого глаза, если отрезки примерно равной длины.

(Если вы хотите, чтобы это было сделано еще более плавно, вы можете рассчитать длину нарисованного сегмента, сохранить общую сумму нарисованной длины дуги и поделить ее на некоторую фиксированную постоянную скорость arclength_per_second, чтобы выяснить, сколько времени должно быть принимается.)