Добрый день! Нужна помощь в реализации движения объекта по окружности... Посоветуете каким образом это можно реализовать? Очень желательно подробно)
1 ответ
Накидал примерчик, за глобальные переменные не пинать, использовал для максимального упрощения примера.
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>
Если возникнут вопросы мол - почему рисуется круг, почему мы считаем углы именно так и тому подобное - гугл в помощь или учебник по тригонометрии :)
PS: Выглядит довольно интересно, так что советую запустить всем :)
UPD:
Дабы квадратик двигался, но не рисовался круг, нужно изменить функцию в интервале таким образом:
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)
Ну и чтобы изменить направление движения квадратика нужно изменить знак синуса или косинуса.
Чтобы изменить стартовое позицию квадратика необходимо изменить стартовое значение угла currentAngle
.
-
-
пожалуйста, сам в свое время листал :DDD– user3545Commented 9 дек. 2011 в 20:00