canvas: ожидание между штрихами строки / js sleep ()

Question

Я использую холст, чтобы нарисовать диаграмму.Я хотел бы сделать его "анимированным", что означает, что вы можете видеть, как нарисованы линии.Поэтому я реализовал небольшую функцию «сна».Но теперь он ждет сумму ms всех вызовов sleep (), прежде чем начнет рисовать что-либо на холсте.Как я могу заставить его ждать между каждым ударом?

function sleep(ms) {
    var time = new Date();
    time.setTime(time.getTime() + ms);
    while (new Date().getTime() < time.getTime()) {}
}

// Вот как я его использую, дайте мне знать, если вам нужен весь контекст.

for ( var columnID in columns) {
    var tempX = startX;
    var tempY = startY;

    this.ctx.beginPath();
    this.ctx.strokeStyle = this.colors[columnID];
    for ( var key in this.data) {
        tempY = startY - this.data[key][columns[columnID]] * 2;
        tempX = tempX + stepWidth;
        this.ctx.lineTo(tempX, tempY);
        this.ctx.stroke();
        sleep(50);
        }
        this.ctx.closePath();
    }

// UDATE: setTimeout () также игнорируется:

jsfiddle (он испортил масштаб, используя фиксированный json, но показывает контекст моего скрипта)

Answer 1

Вы можете использовать setTimeOut или setInterval в Javascript.Эти функции не приостанавливают выполнение, но устанавливают функцию обратного вызова, которая будет вызываться после заданной задержки, а синтаксис будет таким, как указано ниже

setTimeout(function-identifier, delay, params);

например:

function doit(param1, param2){


} 

setTimeout(doit, 500, 20, 20);

В вашем случае это должно быть

setTimeout(this.drawLine, 100, x, y);

, и вы должны также передать this, чтобы оно стало

setTimeout(this.drawLine, 100, this, x, y);
....
....
this.drawLine = function(_this, x, y) {
    _this.ctx.lineTo(x, y);
    _this.ctx.stroke();
    console.log("draw line " + x + "/" + y);
};

И в вашей функции вы вызываете setTimeout внутри циклакоторый не будет иметь никакого значения во времени между построением двух последовательных точек в массиве.Вместо этого он отображает все точки после заданной задержки.Таким образом, вы должны добавить задержку там.Таким образом, я исправил вашу версию кода.

посмотрите: http://jsfiddle.net/diode/pQ4Qg/9/

Но правильный способ сделать это - создать двумерный массив точек и использовать две функции:поменять путь и прочее, чтобы нарисовать каждый путь.

демо здесь: http://jsfiddle.net/diode/pQ4Qg/11/

Вы можете настроить это, чтобы добиться того, что вам нужно.

Answer 2

Ваша sleep функция не нужна.Вы можете использовать встроенную функцию JavaScript setTimeout или setInterval, в зависимости от ваших потребностей.