Статья по теме:
Демо JavaScript:
Масштаб
Сдвиг по x
Сдвиг по y
Наклон
<html> <head> <meta charset="UTF-8"/> <title>lab 2</title> <script src="script.js"></script> </head> <body onload="Init()"> <canvas id="paint" width="503" height="503"></canvas> <br/> <input type="range" id="scale" min="1" max="15" value="8" oninput = "Init()"> Масштаб <br/> <input type="range" id="distX" min="0" max="500" value="250" oninput = "Init()"> Сдвиг по x <br/> <input type="range" id="distY" min="0" max="500" value="250" oninput = "Init()"> Сдвиг по y <br/> <input type="range" id="rotate" min="0" max="360" value="0" oninput = "Init()"> Наклон <br/> <input type="button" value="Выровнять" onclick="Start()"> </body> </html>
var ctx; var t; var x,y,nX,nY,oldX,oldY; let scl, DX, DY, Rotate; function Init() //Функция отрисовки графика при изменении входных данных { ctx = document.getElementById("paint").getContext('2d'); scl = Number(document.getElementById('scale').value); //Получение значения с ползунка "Масштаб" DX = Number(document.getElementById('distX').value); //Получение значения с ползунка "Сдвиг по X" DY = Number(document.getElementById('distY').value); //Получение значения с ползунка "Сдвиг по Y" Rotate = Number(document.getElementById('rotate').value); //Получение значения ползунка "Наклон" Rotate = (Math.PI / 180) * Rotate; //Перевод градусов в радианы ctx.fillStyle = 'white'; //Выбор цвета заливки области ctx.fillRect(0,0,503,503); //Заливка всей области canvas nX = 24.8 * (Math.cos(0) + ((Math.cos(0)) / 6.2)) * scl; //Получение X координаты, для начальной точки графика nY = 24.8 * (Math.sin(0) - ((Math.sin(0)) / 6.2)) * scl; //Получение Y координаты, для начальной точки графика oldX = nX * Math.cos(Rotate) - nY * Math.sin(Rotate); //Вычисление координаты X с учетом поворота oldY = nX * Math.sin(Rotate) + nY * Math.cos(Rotate); //Вычисление координаты Y с учетом поворота for(t = 0; t < 10 * Math.PI; t += 0.01){ //Отрисовка графика nX = 24.8 * (Math.cos(t) + ((Math.cos(6.2 * t)) / 6.2)) * scl; //Вычисление текущей X координаты, для графика nY = 24.8 * (Math.sin(t) - ((Math.sin(6.2 * t)) / 6.2)) * scl; //Вычисление текущей Y координаты, для графика x = nX * Math.cos(Rotate) - nY * Math.sin(Rotate); //Вычисление координаты X с учетом поворота y = nX * Math.sin(Rotate) + nY * Math.cos(Rotate); //Вычисление координаты Y с учетом поворота ctx.beginPath(); ctx.moveTo(oldX + DX, oldY + DY); //Указываем на начало прямой ctx.lineTo(x + DX, y + DY); //Указываем на конец прямой с ее отрисовкой ctx.stroke(); oldX = x; oldY = y; //Сохраняем значения X,Y для следующей итерации } } function Start() //Функция выравнивания графика { var tmpX = 24.8 * (Math.cos(0) + ((Math.cos(0)) / 6.2)); //Получение X координаты, для начальной точки графика var minX = tmpX, maxX = tmpX; //Заполняем переменные для нахождения минимума и максимума по X var tmpY = 24.8 * (Math.sin(0) - ((Math.sin(0)) / 6.2)); //Получение Y координаты, для начальной точки графика var minY = tmpY, maxY = tmpY; //Заполняем переменные для нахождения минимума и максимума по Y for(t = 0; t < 10 * Math.PI; t += 0.01){ //Поиск минимума и максимума по координатам y = 24.8 * (Math.cos(t) + ((Math.cos(6.2 * t)) / 6.2)); //Вычисление текущей X координаты, x = 24.8 * (Math.sin(t) - ((Math.sin(6.2 * t)) / 6.2)); //Вычисление текущей Y координаты if(x > maxX) {maxX = x;} if(x < minX) {minX = x;} //Если текущий X больше или меньше максимума и минимума соответственно, то сохраняем его if(y > maxY) {maxY = y;} if(y < minY) {minY = y;} //Если текущий Y больше или меньше максимума и минимума соответственно, то сохраняем его } tmpX = 503 / (maxX - minX); //Вычисляет коэффициент для координаты X, чтобы он поместился в размер экрана tmpY = 503 / (maxY - minY); //Вычисляет коэффициент для координаты Y, чтобы он поместился в размер экрана if(tmpX < tmpY) {scl = tmpX;} else {scl = tmpY;} //Выбираем минимальный из коэффициентов DX = 250; DY = 250; Rotate = 0; //Ставим все переменные в стандартные значения document.getElementById("scale").value = scl; //Передаем новое значение для ползунка "Масштаб" document.getElementById("distX").value = DX; //Передаем новое значение для ползунка "Перемещение по X" document.getElementById("distY").value = DY; //Передаем новое значение для ползунка "Перемещение по Y" document.getElementById("rotate").value = Rotate; //Передаем новое значение для ползунка "Наклон" ctx.fillStyle = 'white'; //Выбор цвета заливки области ctx.fillRect(0,0,503,503); //Заливка всей области canvas oldX = 24.8 * (Math.cos(0) + ((Math.cos(0)) / 6.2)) * scl; //Получение X координаты, для начальной точки графика oldY = 24.8 * (Math.sin(0) - ((Math.sin(0)) / 6.2)) * scl; //Получение Y координаты, для начальной точки графика for(t = 0; t < 10 * Math.PI; t += 0.01){ //Отрисовка графика x = 24.8 * (Math.cos(t) + ((Math.cos(6.2 * t)) / 6.2)) * scl; //Вычисление текущей X координаты, для графика y = 24.8 * (Math.sin(t) - ((Math.sin(6.2 * t)) / 6.2)) * scl; //Вычисление текущей Y координаты, для графика ctx.beginPath(); ctx.moveTo(oldX + DX, oldY + DY); //Указываем на начало прямой ctx.lineTo(x + DX, y + DY); //Указываем на конец прямой с ее отрисовкой ctx.stroke(); oldX = x; oldY = y; //Сохраняем значения X,Y для следующей итерации } }