MainGamesBlogContacts

RUEN
{{item}}
Rotate the square on the plane. Canvas

04.08.2017
HTML5, CanvasView code
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

Comments
O0O0O0O0Commentator01.01.1970 03:00 (MSK)
There are no comments yet.. You can be the first..
Privacy policy (rus)
Enter your name
Enter your e-mail
Enter your message
Send
captcha