1

Добрый день! Нужна помощь в реализации движения объекта по окружности... Посоветуете каким образом это можно реализовать? Очень желательно подробно)

1
  • автору спасибо)+10000к к карме)
    – user181955
    Commented 22 мая 2015 в 13:57

1 ответ 1

9

Накидал примерчик, за глобальные переменные не пинать, использовал для максимального упрощения примера.

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.

2
  • Огромное спасибо) Совет с учебниками помог больше всего)
    – MrFranke
    Commented 9 дек. 2011 в 19:59
  • пожалуйста, сам в свое время листал :DDD
    – user3545
    Commented 9 дек. 2011 в 20:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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