Трансформации

Последнее обновление: 07.11.2023

Элемент canvas поддерживает трансформации фигур - перемещение, вращение, масштабирование.

Перемещение

Перемещение осуществляется с помощью метода translate():

translate(x, y)

Первый параметр указывает на смещение по оси X, а второй параметр - по оси Y.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(50, 50, 100, 100);
             
context.globalAlpha = 0.5; // прозрачность для наложения 
context.fillStyle = "red";
context.translate(50, 25); // смещение на 50 пикселей вправо и 25 пикселей вниз
context.fillRect(50, 50, 100, 100);
</script>
</body>
</html>

Здесь на одной позиции отрисовываются два равных прямоугольника: синий и красный. Однако к красному прямоугольнику применяется трансформация перемещения:

Перемещение на canvas в JavaScript

Вращение

Для поворота фигур на canvase применяется метод rotate():

rotate(angle)

В этот метод в качестве параметра передается угол поворота в радианах относительно точки с координатами (0, 0).

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(50, 20, 100, 100);
             
context.globalAlpha = 0.5;
context.fillStyle = "red";
context.rotate(.52);	// поворот на 0.52 радиан или 30 градусов
context.fillRect(50, 20, 100, 100);
Поворот на canvas в JavaScript

Масштабирование

Для масштабирования фигур применяется метод scale():

scale(xScale, yScale)

Параметр xScale указывает на масштабирование по оси X, а yScale - по оси Y.

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(0, 0, 100, 100);
             
context.globalAlpha = 0.5;
context.fillStyle = "red";
context.scale(1.5, 1.5); // растяжение по ширине в 1.5 раза и сжатие по высоте в 1.5 раза
context.fillRect(0, 0, 100, 100);
Масштабирование на canvas в JavaScript

Матрица преобразований

При необходимости мы можем применять последовательно несколько преобразований:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(0, 0, 100, 100);
             
context.globalAlpha = 0.5;
context.fillStyle = "red";
context.scale(1.5, 1.5);
context.translate(100, 10);
context.rotate(0.34);
context.fillRect(0, 0, 100, 100);

Но контекст элемента canvas также предоставляет метод transform(), который позволяет задать матрицу преобразования:

transform(a, b, c, d, e, f)

Все параметры этого метода последовательно представляют элементы матрицы преобразования:

  • a: масштабирование по оси X

  • b: поворот вокруг оси X

  • c: поворот вокруг оси Y

  • d: масштабирование по оси Y

  • e: горизонтальное смещение

  • f: вертикальное смещение

Например:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(100, 30, 100, 100);
			

context.globalAlpha = 0.5;
context.fillStyle = "red";
// применяем трансформации
context.transform(	
	Math.cos(Math.PI/6), Math.sin(Math.PI/6), -1 * Math.sin(Math.PI/6), 
	Math.cos(Math.PI/6), 0, 0);
context.fillRect(100, 30, 100, 100);
Матрица преобразований на canvas в JavaScript

Замена трансформации

При последовательном применении разных трансформаций они просто последовательно применяются к фигурам. Однако может возникнуть ситуация, когда надо применить трансформацию не вместе со другими, а вместо других, то есть заменить трансформацию. Для этого применяется метод setTransform():

setTransform(a, b, c, d, e, f)

Его параметры представляют матрицу преобразования, и в целом его применение аналогино применению метода transform(). Например:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let k = 0;
for (let x = 0; x < 30; x++) {
	k = Math.floor(255 / 34 * x);
	context.fillStyle = "rgb(" + k + "," + k + "," + k + ")";
	context.fillRect(50, 50, 200, 100);
	context.setTransform(1, 0, 0, 1, x, x);
}
setTransform in JavaScript

Сброс трансформаций

При применении трансформаций вся последующая отрисовка фигур подвергается данным трансформациям. Но возможна ситуация, когда после одиночного применения трансформации нам больше не нужно ее применение. И для всей последующей отрисовки мы можем сбросить трансформации с помощью метода resetTransform():

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.fillRect(100, 10, 100, 100);
			
context.globalAlpha = 0.5;
context.fillStyle = "red";
context.translate(50, 25);
// дальше применяется трансформация
context.fillRect(100, 10, 100, 100);
			
context.fillStyle = "green";
context.resetTransform();
// трансформация больше не применяется
context.fillRect(0, 10, 100, 100);
Сброс трансформаций на canvas в JavaScript

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм