Napisałem ten kod, ale nie działa. Javascript rysuje linię od razu, zamiast pokazywać mi, jak linia jest rysowana

Co ja robię źle? Dzięki

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

var i = 200;

  while (i<220) {
  
  ctx.beginPath();
  ctx.lineWidth = 10;
  ctx.lineCap = "butt";
  ctx.moveTo(20, 20);
  ctx.lineTo(i, 20);
  ctx.stroke();  

  console.log("Hello");
  sleep(200);
  console.log("World!");

  i++

}  

function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}
<p>The three different line caps:</p>
<canvas id="myCanvas">Example</canvas>
    
0
Adrenerg1co 1 kwiecień 2020, 21:02

3 odpowiedzi

Najlepsza odpowiedź

Po prostu użyj setInterval, aby zobaczyć taką animację:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
let i = 0;
const startInterval = function(){
i += 5
ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = "butt";
ctx.moveTo(20, 20);
ctx.lineTo(i, 20);
ctx.stroke();  
if(i === 220){
  clearInterval(interval);
  console.log("finished")
  }
}

let interval = setInterval(startInterval, 200)
    <p>The three different line caps:</p>
    <canvas id="myCanvas">
    Example</canvas>
1
tomer raitz 1 kwiecień 2020, 18:49

Dzieje się tak, ponieważ kanwa nie aktualizuje się sama podczas działania kodu. Możesz łatwo zobaczyć efekt, na przykład zmieniając kolor obramowania płótna. Jedynym sposobem rozwiązania tego problemu jest naśladowanie operacji asynchronicznych za pomocą metody setTimeout lub setInterval, jak opisano powyżej. W ten sposób sprawiasz, że stos na chwilę jest pusty, a płótno jest odświeżane w wyniku każdej iteracji.

0
Tarukami 1 kwiecień 2020, 19:19

Nie potrafię dokładnie wyjaśnić, dlaczego takie zachowanie ma miejsce, ale mam rozwiązanie. Zwykle jeśli chcesz wykonać to samo zadanie w powtarzających się odstępach czasu, użyj setInterval. Jest też setTimeout, które możesz używać, ale pierwszy jest bardziej odpowiedni.

var number = 0;

// you pass the function to call, and how often as arguments
let count = setInterval(countUpTo5, 500);

function countUpTo5() {
    if (number > 5) {
        // by passing the name of the interval, you can stop it
        clearInterval(count);
    } else {
        console.log(number);
        number++;
    }
}

Powodzenia, a jeśli potrzebujesz dodatkowej pomocy, zostaw komentarz.

1
dantechguy 1 kwiecień 2020, 18:57