Построение окружности js

239

05 августа 2021, 16:10

написал небольшой скрипт на 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>

Answer 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Построение окружности js

алгоритм поиска номера элемента в списке

char to string c#

Как корректно переместить блок через Matrix3d.Displacement?

Вывод прочтённого из сокета при достижении символа новой строки