Почему html-анимация холста отображает временный пробел для каждого нового прямоугольника? - PullRequest
Новая
       30

Почему html-анимация холста отображает временный пробел для каждого нового прямоугольника?

0 голосов
/ 29 декабря 2018

У меня есть массив прямоугольников или «труб», которые отображаются на холсте html5.Новые каналы динамически добавляются в массив перед визуализацией (и анимацией).Проблема заключается в том, что каждая новая труба имеет крошечный зазор между собой и предыдущей трубой, этот пробел исчезает, когда вводится следующая труба.Ни в коем случае не должно быть зазора.

Это так странно и сводит меня с ума.

Ссылка на Codepen ниже должна сделать этот вопрос намного понятнее.

Рабочий пример кодепа. 

const body = document.getElementsByTagName("body")[0];
const canvasWidth = 500;
const canvasHeight = 820;
const canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var frame_count = 0;
var speed = 1;
var pipes = [];

function Pipe(height) {
  this.x = canvasWidth;
  this.height = height;
  this.update = function() {
    ctx.fill();
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.rect(this.x, 0, 100, this.height);
    this.x = this.x - (1 * speed);
  };
}

function setup() {
  // Render blank canvas to dom
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  body.appendChild(canvas);
}

function draw() {
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Pipe generator
  if (frame_count % 100 === 0) {
    if (frame_count % 200 === 0) {
      pipes.push(new Pipe(100));
    } else {
      pipes.push(new Pipe(120));
    }
  }

  // Draw pipes
  for (i = 0; i < pipes.length; i++) {
    pipes[i].update();
  }

}

function loop() {
  setTimeout(function() {
    draw();
    frame_count++;
    requestAnimationFrame(loop);
  }, 0);
}

setup();
loop();

1 Ответ

0 голосов
/ 29 декабря 2018

Это происходит потому, что в вашей функции рисования вы делаете все наоборот; -)

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

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

const body = document.getElementsByTagName("body")[0];
const canvasWidth = 500;
const canvasHeight = 820;
const canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var frame_count = 0;
var speed = 1;
var pipes = [];

function Pipe(height) {
  this.x = canvasWidth;
  this.height = height;
  this.update = function() {
    // first update position
    this.x = this.x - (1 * speed);
    ctx.fillStyle = 'black';
    // then declare the path
    ctx.beginPath();
    ctx.rect(this.x, 0, 100, this.height);
    // finally draw it
    ctx.fill();
  };
}

function setup() {
  // Render blank canvas to dom
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  body.appendChild(canvas);
}

function draw() {
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Pipe generator
  if (frame_count % 100 === 0) {
    if (frame_count % 200 === 0) {
      pipes.push(new Pipe(100));
    } else {
      pipes.push(new Pipe(120));
    }
  }

  // Draw pipes
  for (i = 0; i < pipes.length; i++) {
    pipes[i].update();
  }

}

function loop() {
// do not mix setTimeout and rAF, it's like having a Ferrari parked in a truck...
//  setTimeout(function() {
    draw();
    frame_count++;
    requestAnimationFrame(loop);
//  }, 0);
}

setup();
loop();
...