Question

我试图用HTML和画布在HTML 5中制作Logo Turtle（我想和我的学生学习简单的算法，我想做简单的说明）。

我成功地制作了基本说明，但这些线条同时出现，我希望看到它们一个接一个地出现。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

我想要两条线（一条对角线和一条垂直线），但我有很多......

我该怎么做？

谢谢！ PS：我不会说英语，道歉......

Answer 1

你的问题是你的代码是asynchrone。要实现您想要的目标，您需要一个动画管理器。

这里，我们的动画管理器只有两个var：一个是布尔值，知道我们是否正在移动，另一个是一个累积排队动画的数组：

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 =＆gt; https://jsfiddle.net/y9efewqb/5/

PS：我使用你的代码来解释如何制作你的turle但是应该优化某些部分（使用requestAnimationFrame而不是使用setInterval，在类中进行所有这些以避免全局变量，... 。）

绘制动画线条

1 个答案: