Рисование линий с использованием RequestAnimationFrame ()

Question

Я хочу нарисовать горизонтальную линию, когда игра запускается и может придумать что-то, что нарисовало линию, используя requestAnimationFrame() и ctx.stroke().

Проблема в том, что когда я пытаюсь редактироватьдлина линии, изменяя значения конечной точки на линии, линия остается такой же длины.

Если бы кто-нибудь мог взглянуть на это и объяснить, что происходит, я был бы очень признателен.

var canvasTop = document.getElementById('top');
var ctxTop = canvasTop.getContext('2d');

var frameCountTop = 0;
var fpsTop, fpsIntervalTop, startTimeTop, nowTop, thenTop, elapsedTop;

function startAnimatingTop(fpsTop) {
    fpsIntervalTop = 1000 / fpsTop;
    thenTop = Date.now();
    startTimeTop = thenTop;
    drawTop();
}

var topLinePointA = [32, 80];
var topLinePointB = [280, 80];
var topLineStart = topLinePointA[0];
var topLineIncrement = topLineStart + 1;
var topLineEnd = topLinePointB[0];

function drawTop() {
  var i = 32;
  while (i < topLineEnd) {
    requestAnimationFrame(drawTop);
    i++;
    nowTop = Date.now();
    elapsedTop = nowTop - thenTop;
    if (elapsedTop > fpsIntervalTop && i < topLineEnd) {
        thenTop = nowTop - (elapsedTop % fpsIntervalTop);
        ctxTop.lineWidth = 20;
        ctxTop.strokeStyle = "black";
        ctxTop.moveTo(topLineStart, 80);
        ctxTop.lineTo(topLineIncrement, 80);
        ctxTop.stroke();
        topLineStart += 1;
    } else {
      cancelAnimationFrame(drawTop);
      return;
    }
  }
}

startAnimatingTop(100);

/*HANGMAN STYLES*/

/*CLASS SELECTORS*/
.lineContainer {
  /*border-style: solid;
  border-color: blue;*/
}

#top {
  position: absolute;
  height: 5%;
  width: 45%;
  left: 30%;
}

#side {
  position: absolute;
  bottom: 20%;
  left: 70%;
  height: 78%;
  width: 5%;
}

#bottom {
  position: absolute;
  bottom: 35%;
  height: 5%;
  width: 56%;
  left: 20%;
}

#hangman {
  position: absolute;
  left: 30%;
  height: 40%;
  width: 10%;
}

<canvas id='top' class='lineContainer'></canvas>
<canvas id='side' class='lineContainer'></canvas>
<canvas id='bottom' class='lineContainer'></canvas>
<canvas id='hangman' class='lineContainer'></canvas>
<canvas id='puzzle'></canvas>
<div id='scorecard'>

</div>

Answer 1

Есть много проблем с вашим кодом.

Вы должны прочитать об использовании холста.https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D поможет.

1. Вызовите requestAnimationFrame только один раз за кадр.Поместив его в цикл while, вы начнете тысячи кадров, борющихся за обновление дисплея.
2. Начните пути с ctx.beginPath();
3. Очистите холст, используя ctx.clearRect(0,0,width,height)
4. Установить холстразмер через атрибуты, а не через свойства стиля.
5. Первый аргумент функции, вызываемой requestAnimationFrame, - это время.например, drawTop(time)

См. комментарии для получения дополнительной информации.

ctx.canvas.width = 100;  // << set the canvas size via canvas attributes not style
ctx.canvas.height = 100;

var thenTop = performance.now(); // to get time.

requestAnimationFrame(drawTop); // <<< start the render loop with request, dont call direct

function drawTop(nowTop) { // << time passed to render call
  requestAnimationFrame(drawTop);  //                                 <<< put call here not in loop
  ctxTop.clearRect(0, 0, ctxTop.canvas.width, ctxTop.canvas.height);  // <<<  clear the canvas
  var i = 32;
  while (i < topLineEnd) {
    // requestAnimationFrame(drawTop); //      <<<<<<< Not here
    i++;

    elapsedTop = nowTop - thenTop;
    if (elapsedTop > fpsIntervalTop && i < topLineEnd) {
        thenTop = nowTop - (elapsedTop % fpsIntervalTop);
        ctxTop.lineWidth = 20;
        ctxTop.strokeStyle = "black";
        ctxTop.beginPath();  //            <<<<<< To start a new path
        ctxTop.moveTo(topLineStart, 80);
        ctxTop.lineTo(topLineIncrement, 80);
        ctxTop.stroke();
        topLineStart += 1;
    } else {
      return;
    }
  }
}