Как я могу оживить объект на орбите, используя HTML5 Canvas? - PullRequest
Новая
       19

Как я могу оживить объект на орбите, используя HTML5 Canvas?

1 голос
/ 11 мая 2011

Допустим, я уже нарисовал все свои объекты, солнце посередине и пару кругов для планет.Может ли кто-нибудь объяснить мне, как я заставляю эти объекты двигаться по кругу?Мне не нужна гравитация и т. Д., Но я полагаю, это может быть приятным бонусом!

Спасибо:)

Ответы [ 2 ]

5 голосов
/ 11 мая 2011

Вот грубое решение: 

var canvas = document.getElementById('scene');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;

var circle = function(color, r) {
    ctx.fillStyle = color;

    ctx.beginPath();
    ctx.arc(0, 0, r, 0, 2 * Math.PI, true);
    ctx.closePath();

    ctx.fill();
}

var i = 0;
var redraw = function() {
    ctx.save();

    // paint bg
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, w, h);

    // set origin to center
    ctx.translate(w / 2, h / 2);

    // draw sun
    circle('yellow', 20);

    // rotate + move along x
    ctx.rotate(i / 100);
    ctx.translate(100, 0);

    // draw planet
    circle('green', 10);

    ctx.restore();

    i++;

    window.requestAnimationFrame(redraw);
};

window.requestAnimationFrame(redraw);

Демоверсию можно найти здесь . Расширьте по мере необходимости. :)

3 голосов
/ 12 мая 2011

Чтобы повернуть точку в пространстве (в данном случае это точка планеты), вам нужно умножить координаты точки на матрицу двумерного преобразования, к счастью, вам не нужно беспокоиться о том, как научитьсяпостроить эту матрицу или как умножить точку на матрицу.В контексте холста html5 есть метод rotate(), который будет делать это для вас в каждой точке, которую вы рисуете после вызова этой функции.Метод rotate() позволяет передавать уникальный параметр, который представляет собой угол поворота, но этот угол необходимо преобразовать в радианы.Чтобы преобразовать угол X в радианы, вы делаете следующее: 

var X = 10; // 10 degrees
var X_Radians = Math.PI / 180 * X;

// Now you pass this angle to the rotate method
context.rotate(X_Radians);

Хорошо, теперь вы знаете, как вращать точку на холсте, просто не забудьте выполнить операцию сохранения и восстановления, чтобы она не влияладругие объекты в сцене.

Теперь вам нужно повернуть точку вокруг другой точки (солнца), когда вы поворачиваете что-то на холсте, оно будет вращаться вокруг точки (0,0), если ваше солнце не находится в положении (0,0), вам нужно перевести (переместить) точку, которую вы хотите повернуть, таким образом, чтобы положение солнца было в положении (0,0),Для этого вам нужно только вычесть положение солнца из положения точки вращения.Затем примените вращение, а затем переведите (переместите) вашу точку обратно в исходное положение, добавив положение солнца, которое вы вычитали из него ранее.

Чтобы перевести свою точку, вы будете использовать метод translate()контекст холста, так что здесь мы идем (только не обращайте внимания на то, что моя планета и Солнце являются правами): 

var Planet_Position = {X: 400, Y: 250};
var Sun_Position = {X: 250, Y: 250};

// First, let's draw our sun and our planet
context.fillStyle = "#ffff00";
context.fillRect(Sun_Position.X, Sun_Position.Y, 10, 10);

context.fillStyle = "#0000ff";
context.fillRect(Planet_Position.X, Planet_Position.Y, 10, 10);

// Ok, so now we are going to rotate our planet around the sun and draw it again

context.save();
context.translate(Sun_Position.X, Sun_Position.Y);
context.rotate(-Math.PI / 180 * 10);
context.translate(-Sun_Position.X, -Sun_Position.Y);

context.fillRect(Planet_Position.X, Planet_Position.Y, 10, 10);

context.restore();

Хорошо, вы могли заметить одну неловкую вещь: я сказал, что вам нужно вычестьПоложение Солнца вначале от положения планеты и добавьте его после вращения, но в приведенном выше коде я сначала добавил положение Солнца и вычитание после, но это только из-за порядка умножения матриц, происходящего под колпаком., делает все наоборот ...

Нет, я надеюсь, что я был ясен, но геометрическое преобразование - действительно большая тема, чтобы объяснить в таком коротком ответе ...

...