绘制动画线

Question

我试图用HTML和canvas（我想学习简单的算法与我的学生，我想做出简单的指示）在HTML 5中的徽标龟。

我成功地做了基本的说明，但这些线条都是同时出现的，我想看到它们一个接一个出现。

这里是我的代码：

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(); 
    } 
} 

而且，过去的事情，每个动画自我管理启动，停止和调用next动画：

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：我用你的代码来解释如何使你因特尔但有些部分应该优化（使用​​而不是使用setInterval，使这一切在课堂上，以避免全局变量， ...）