Как в js canvas нарисовать траекторию объекта?

Question

Если у меня есть некий объект, у которого есть координаты, которые я как-то меняю в каждом кадре, то как мне рисовать за этим объектом траекторию по которой он двигался?

Вот пример кода:

let cnv = document.getElementById('cnv');
let ctx = cnv.getContext('2d');
const W = 500;
const H = 500;
cnv.width = W;
cnv.height = H;

let object = {
  x: 0,
  y: 0
}

setInterval(update, 20)

function update() {
  ctx.fillStyle = '#000'
  ctx.clearRect(0, 0, W, H);
  ctx.fillRect(0, 0, W, H);

  let x = object.x + 4;
  let y = object.y + 3;
  object.x = (x % W + W) % W;
  object.y = (y % H + H) % H;

  ctx.fillStyle = '#fff'
  ctx.fillRect(object.x - 2, object.y - 2, 5, 5);
}

<canvas id="cnv"></canvas>

Мне нужно чтобы за этим квадратом шла линия, но как это сделать?

Answer 1

Можно сохранять координаты объекта на при каждом изменении, и просто рисовать линии по каждой сохраненной точке:

let cnv = document.getElementById('cnv');
let ctx = cnv.getContext('2d');
const W = 500;
const H = 500;
cnv.width = W;
cnv.height = H;

var path = [];

let object = {
  x: 0,
  y: 0
}

requestAnimationFrame(update);

function update() {
  ctx.fillStyle = '#000'
  ctx.clearRect(0, 0, W, H);
  ctx.fillRect(0, 0, W, H);

  drawPath(path);
  let x = object.x + 4;
  let y = object.y + 3;
  object.x = (x % W + W) % W;
  object.y = (y % H + H) % H;

  path.unshift({
    x: object.x,
    y: object.y
  });
  if (path.length > 20) path.pop();

  ctx.fillStyle = '#fff'
  ctx.fillRect(object.x - 2, object.y - 2, 5, 5);

  requestAnimationFrame(update);
}

function drawPath() {
  if (!path.length) return;

  ctx.beginPath();
  ctx.moveTo(path[0].x, path[0].y);

  for (var {
      x,
      y
    } of path) {
    ctx.lineTo(x, y);
  }
  ctx.strokeStyle = '#fff';
  ctx.stroke();
}

<canvas id="cnv"></canvas>

БЛОГ НА HUSL

Как в js canvas нарисовать траекторию объекта?

Ответы (1 шт):