0

написал небольшой скрипт на js в котором небольшой круг описывает собой окружность, но на уровне точки окружности по оси x, круг начинает увеличивать скорость, а потом уменьшает ее. Можете пожалуйста объяснить почему это происходит, и как это пофиксить чтобы он двигался с одной скоростью. Код

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = 150;
var y = 200;
var dx = 1;
var dy = -2;
var men = 1;

function drawball() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawball();
  if (x + dx > 250 || x + dx < 150) {
    dx = -dx;
    men = -men;

  }
  x += dx;
  sqr = men * Math.sqrt(2500 - (x - 200) * (x - 200));
  y = 200 + sqr;

}
var interval = setInterval(draw, 40);
* {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
  margin: 0 auto;
  margin-top: 100px;
}
<canvas id="myCanvas" width="480" height="320"></canvas>

1
  • а что это за формулы у Вас такие? 21 сен 2019 в 17:37

1 ответ 1

1

Проблема в расчетах положения точки на круге. Вот вам рабочий пример:

x = 100 + rad * Math.cos (deg * Math.PI / 180);
y = 100 + rad * Math.sin (deg * Math.PI / 180);

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 5;
let x, y = 0;
var men = 1;
let rad = 50;
let deg = 0;

function drowball() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function drow() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x = 100 + rad * Math.cos (deg * Math.PI / 180);
  y = 100 + rad * Math.sin (deg * Math.PI / 180);
  deg++;
  drowball();
  window.requestAnimationFrame(drow);
}
drow();
* {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
}
<canvas id="myCanvas" width="480" height="320"></canvas>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.