52 lines
2.2 KiB
JavaScript
52 lines
2.2 KiB
JavaScript
// © Головин Г.Г., Код с комментариями, 2023
|
||
'use strict';
|
||
let canvas = document.getElementById('canvas');
|
||
// исходный массив точек-вершин квадрата
|
||
let square = [{x:50,y:50},{x:50,y:250},{x:250,y:250},{x:250,y:50}];
|
||
// центр фигуры, вокруг него будем выполнять поворот
|
||
let t0 = {x:150, y:150};
|
||
// угол поворота в градусах
|
||
let deg = 1;
|
||
|
||
// поворот фигуры и обновление изображения
|
||
function repaint() {
|
||
// поворачиваем исходный массив точек на угол
|
||
for (let i = 0; i < square.length; i++)
|
||
square[i] = rotateOnDegree(t0, square[i], deg);
|
||
// рисуем текущий массив точек
|
||
drawFigure(canvas, square);
|
||
}
|
||
|
||
// поворачиваем точку (t) на угол (deg) относительно точки (t0)
|
||
function rotateOnDegree(t0, t, deg) {
|
||
let t_new = {};
|
||
// переводим угол поворота из градусов в радианы
|
||
let 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;
|
||
}
|
||
|
||
// рисуем фигуру по точкам из массива
|
||
function drawFigure(canvas, arr) {
|
||
let context = canvas.getContext('2d');
|
||
// очищаем весь холст целиком
|
||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||
// обходим массив точек и соединяем их линиями
|
||
context.beginPath();
|
||
for (let 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();
|
||
// рисуем линии на холсте
|
||
context.lineWidth = 2.2;
|
||
context.strokeStyle = '#222';
|
||
context.stroke();
|
||
}
|
||
|
||
// после загрузки страницы, задаём частоту обновления изображения 20 Гц
|
||
document.addEventListener('DOMContentLoaded',()=>setInterval(repaint,50));
|