Рисование анимированных строк

Question

Я пытаюсь сделать логотип Turtle в HTML 5 с помощью javascript и canvas (я хочу изучать простые алгоритмы с моими учениками, и я хочу сделать простые инструкции).

Я успешно выполнил основные инструкции, но линии появляются одновременно, и я хочу, чтобы они отображались один за другим.

Вот мой код:

var dessin = document.getElementById("dessin") 
 
var ctx = dessin.getContext("2d"); 
 

 
var angle = 0; // angle en degrés 
 
// on donne les coordonnées de départ 
 
var x = dessin.width/2; 
 
var y = dessin.height/2; 
 

 
function forward(distance) { 
 
    var iter = 1; 
 
    var Angle = angle % 360; 
 
    var theta = Angle/180 * Math.PI; 
 
    var vitesse = 10; 
 
    var compteur = 1; 
 

 
    var timer = setInterval(function() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(x, y); 
 
    x = Math.cos(theta) * distance/vitesse + x; 
 
    y = Math.sin(theta) * distance/vitesse + y; 
 
    ctx.lineTo(x, y); 
 
    ctx.stroke(); 
 
    compteur++; 
 
    if (compteur > vitesse) { 
 
     clearInterval(timer); 
 
    } 
 

 
    }, 1000/vitesse); 
 
    //setTimeout(clearInterval(timer),2000); 
 
} 
 

 
function turn_left(angle_rotation) { 
 
    angle = (angle - angle_rotation) % 360; 
 
} 
 

 

 
//Firing commands 
 
turn_left(45); 
 
forward(100); 
 
turn_left(45); 
 
forward(100);

<canvas id="dessin" width="400" height="400"></canvas>

Я хочу иметь две линии (по диагонали один, и вертикальная), но у меня есть много его ...

Как я могу это сделать?

Спасибо! PS: Я не очень хорошо владею английским языком, мои извинения ...

Answer 1

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

Вот наш менеджер анимации только два вар: один является булевой знать, если мы двигаемся, другой массив, который накапливается в очереди анимации:

var moveManager = []; 
var isMoving = false; 

Я также таймер глобального, потому что у нас есть только одна анимация в то время:

var timer; 

После нужно сделать логику вашего менеджера анимации, которая: Если я не двигаюсь и у меня есть очередь анимации так играть:

function nextMove() { 
     if (!isMoving && moveManager.length) { 
      var move = moveManager.shift(); 
      move(); 
    } 
} 

И последняя вещь, каждая анимация управляет сам запуск, остановка и призыв к следующей анимации:

function turn_left(angle_rotation) { 
    moveManager.push(function() { 
    isMoving = true; 
    angle = (angle - angle_rotation) % 360 ; 
    isMoving = false; 
    nextMove(); 
    }); 
} 

При всем этом, вы можете продолжать свою черепаху.

Рабочая jsFiddle =>https://jsfiddle.net/y9efewqb/5/

PS: Я использую свой код, чтобы объяснить, как сделать свой turle, но какая-то часть должна быть оптимизирована (используйте requestAnimationFrame вместо использования setInterval, сделать все это в классах, чтобы избежать глобальной переменной, ...)