cherry.png

Вращаем квадрат на плоскости. Canvas

04.08.2017
checkmark3

HTML5, Canvas

Поворот точки на заданный угол относительно другой точки на плоскости - программа средней школы по геометрии. Рассматриваем пример с квадратом 200х200 и началом координат в его центре. Реализация на Canvas.

Ваш браузер не поддерживает Canvas

HTML

<canvas id="canvas" width="300" height="300" style="border: 1px solid gray">
    <p>Ваш браузер не поддерживает Canvas</p>
</canvas>

JavaScript

'use strict';

var canvas = document.getElementById('canvas');

var canvas_context = canvas.getContext('2d');

// Сместим начало координат в центр блока
canvas_context.translate(canvas.width / 2, canvas.height / 2);

// Фигуру будем задавать как массив точек,
// в нашем случае квадрат - четыре точки
var arr_t = [];
arr_t[0] = {x:-100, y:-100};
arr_t[1] = {x:100, y:-100};
arr_t[2] = {x:100, y:100};
arr_t[3] = {x:-100, y:100};

// Центр фигуры.
// Вокуг него будем осуществлять поворот
var t0 = {x:0, y:0};

// Угол поворота в градусах
var deg = 0;

// Создаем текущий массив точек
var arr_tt = [4];

// Задаем функцию обновления отображения
// с поворотом фигуры.
// Затем эту функцию надо будет вставить
// в переменную window.onload
function repaint() {

    // Сначала закрасим текущую фигуру
    canvas_context.lineWidth = 4; // rgba(255,255,255,1) - белый непрозрачный
    fillFigure(canvas_context, arr_tt, 'rgba(255,255,255,1)', true);

    // Теперь повернем исходную фигуру на угол
    // и перезапишем текущую фигуру
    for (var i = 0; i < arr_t.length; i++) {
        arr_tt[i] = rotateOnDegree(t0, arr_t[i], deg);
    }

    // Нарисуем новую фигуру
    canvas_context.lineWidth = 2; // rgba(0,0,0,0.5) - черный полупрозрачный
    fillFigure(canvas_context, arr_tt, 'rgba(0,0,0,0.5)', false);

    // И увеличим угол
    deg += 1;
}

// Рисуем фигуру по точкам из массива,
// опционально закрашиваем
function fillFigure(context, arr, color, fill) {
    context.strokeStyle = color;
    context.fillStyle = color;

    context.beginPath();
    for (var i = 0; i < arr.length; i++) {

        if (i == 0) {
            context.moveTo(arr[i].x, arr[i].y);
        } else {
            context.lineTo(arr[i].x, arr[i].y);
        }
    }
    context.closePath();

    if (fill) {
        context.fill();
    }
    context.stroke();

}

// Поворачиваем точку t(x,y) на угол (deg) относительно точки t0(x,y)
function rotateOnDegree(t0, t, deg) {

    var t_new = {};

    // Переводим угол поворота из градусов в радианы
    var rad = (Math.PI / 180) * deg;

    // И рассчитываем координаты новой точки по формуле
    t_new.x = t0.x + (t.x - t0.x) * Math.cos(rad) - (t.y - t0.y) * Math.sin(rad);
    t_new.y = t0.y + (t.x - t0.x) * Math.sin(rad) + (t.y - t0.y) * Math.cos(rad);

    // Возвращаем полученное значение
    return t_new;
}

// Устанавливаем интервал обновления отображения
window.onload = function() {
    setInterval(repaint, 50);
};
Центр вращения не обязательно должен находиться в середине фигуры. Например, его можно сместить в нижний правый угол, или в верхний левый, или задать для него функцию вращения - в принципе, все что угодно.

Ваш браузер не поддерживает Canvas

Ваш браузер не поддерживает Canvas

Ваш браузер не поддерживает Canvas


facebookvkontaktetwitterodnoklassnikimailrulivejournal

Комментарии

O0O0O0O0
Комментатор
01.01.1970 03:00 (MSK)
Комментариев пока нет.. Вы можете стать первым..