Где я мог допустить ошибку при работе с canvas?

Question

[Steve Gorton]

Я хотел сделать так, чтобы при нажатии кнопки start работал маятник, но он просто возвращается и все

Answer 1

[0xD34F]

Честно говоря, разбираться, где и как вы ошиблись, особого смысла нет. Потому что избранный вами способ... ну, никто так не делает. Координаты рассчитываются не путём какого-то безумного подбора значений, а исходя из длины маятника и угла поворота. Например:

<button onclick="start()" type="button">Start</button>
<button onclick="stop()">Stop</button>
<canvas width="300" height="300"></canvas>

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const coord = { x: canvas.width / 2, y: canvas.height / 3 };
const length = canvas.width / 3;
const angleMax = 120;
const angleMin = 60;
let angleChange = 1;
let angle = 60;
let active = null;

function stop() {
  active = false;
}

function start() {
  active = true;
  draw();
}

function draw() {
  if (!active) {
    return;
  }

  const { x, y } = coord;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.moveTo(x, y);
  const _a = angle * Math.PI / 180;
  ctx.lineTo(x + length * Math.cos(_a), y + length * Math.sin(_a));

  angle += angleChange;
  if (angle === angleMin || angle === angleMax) {
    angleChange *= -1;
  }

  ctx.stroke();

  requestAnimationFrame(draw);
}