cherry.png

Rotate the square on the plane. Canvas

04.08.2017
checkmark3

HTML5, Canvas

The rotation of a point by a specified angle relative to another point on the plane - the secondary school curriculum in geometry. Consider an example with a square 200x200 and the origin of coordinates at its centre. Implementation in Canvas.

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

This article has continuations:Rotate the cube in spaceandSpinning spatial cross

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);
};
The center of rotation does not have to be in the middle of the figure. For example, it can be moved to the bottom right corner, or to the upper left, or you may determine the function of rotation. Anything you like.

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

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

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


facebookvkontaktetwitterodnoklassnikimailrulivejournal

Comments

O0O0O0O0
Commentator
01.01.1970 00:00 (MSK)
There are no comments yet.. You can be the first..