JS canvas circle object movement

Question

Good day! Need help in the implementation of the movement of the object in a circle ... Would you advise how this can be done? Very desirable detail)

user207618 · Accepted Answer · 2011-12-09T15:10:06

Threw a sample, do not kick for global variables, used to simplify the example as much as possible.

var context; // переменная для хранения контекста var container; // переменная для хранения canvas элемента var currentAngle = 0; // текущее значение угла var radius = 100; // радиус окружности var baseX = 200; // x координата центра окружности var baseY = 200; // y координата центра окружности window.onload = function() { container = document.createElement("canvas"); // создаем canvas элемент container.width = 400; // устанваливаем ширину container.height = 400; // устанавливаем высоту document.body.appendChild(container); // добавляем canvas в DOM context = container.getContext('2d'); // получаем конткест context.fillStyle = '#000'; // устанавливаем цвет заливки в черный context.fillRect(0, 0, container.width, container.height); // собственно заливаем все черным setInterval(function() { // считаем косинус текущего значения угла // и умножаем на значение радиуса var vx = Math.cos(currentAngle) * radius; // считаем синус текущего значения угла // и умножаем на значение радиуса var vy = Math.sin(currentAngle) * radius; context.fillStyle = '#fff'; // устанавливаем цвет заливки в белый context.fillRect(baseX + vx, baseY + vy, 5, 5); // считем новую позицию по x и y относительно центра окружности // и заливаем ее квадратиком высотой и шириной в 5 пикселей // увеличиваем значение угла currentAngle += 0.1; }, 5) }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Движение по кругу</title> </head> <body></body> </html>

If there are any questions, they say - why a circle is drawn, why we consider angles exactly like that and the like - google help or textbook on trigonometry :)

PS: It looks quite interesting, so I advise you to run it all :)

UPD:
In order for the square to move, but the circle was not drawn, you need to change the function in the interval as follows:

  setInterval(function(){ context.fillStyle = '#000'; context.fillRect(0, 0, container.width, container.height); // т.е. на каждом "тике интервала" надо снова все заливать черным var vx = Math.cos(currentAngle)*radius; var vy = Math.sin(currentAngle)*radius; context.fillStyle = '#fff'; context.fillRect(baseX+vx, baseY+vy, 5, 5); currentAngle+=0.1; }, 5)

Well, to change the direction of the square you need to change the sign of the sine or cosine.

To change the starting position of a square, you must change the starting value of the angle currentAngle .

Thank you so much) The textbook board helped most) - MrFranke

JS canvas circle object movement

1 answer 1

More articles: