CanvasRenderingContext2D: метод scale()

Метод CanvasRenderingContext2D.scale() API Canvas 2D добавляет масштабирование по горизонтали и/или вертикали к единицам измерения холста.

По умолчанию, одна единица на холсте соответствует одному пикселю. Трансформация масштабирования изменяет это поведение. Например, коэффициент масштабирования 0,5 приводит к размеру единицы в 0,5 пикселя; фигуры при этом рисуются вполовину от обычного размера. Аналогично, коэффициент масштабирования 2,0 увеличивает размер единицы, так что одна единица становится двумя пикселями; фигуры при этом рисуются в два раза больше обычного размера.

x

Коэффициент масштабирования по горизонтали. Отрицательное значение переворачивает пиксели относительно вертикальной оси. Значение 1 приводит к отсутствию горизонтального масштабирования.

y

Коэффициент масштабирования по вертикали. Отрицательное значение переворачивает пиксели относительно горизонтальной оси. Значение 1 приводит к отсутствию вертикального масштабирования.

None (undefined).

В этом примере рисуется прямоугольник, подвергнутый масштабированию. Для сравнения также рисуется не масштабированный прямоугольник.

HTML

<canvas id="canvas"></canvas>

JavaScript

Прямоугольник имеет заданную ширину 8 и высоту 20. Матрица преобразования масштабирует его на 9x по горизонтали и на 3x по вертикали. Таким образом, его конечный размер составляет ширину 72 и высоту 60.

Обратите внимание, что его положение на холсте также изменяется. Поскольку указанный угол находится в (10, 10), его отрисованный угол становится (90, 30).

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

// Scaled rectangle
ctx.scale(9, 3);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 8, 20);

// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Non-scaled rectangle
ctx.fillStyle = "gray";
ctx.fillRect(10, 10, 8, 20);

Результат

Масштабированный прямоугольник красный, а не масштабированный — серый.

Можно использовать scale(-1, 1) для горизонтального и scale(1, -1) для вертикального переворота контекста. В данном примере слова «Hello world!» перевернуты по горизонтали.

Обратите внимание, что вызов fillText() указывает отрицательную координату x. Это делается для компенсации отрицательного коэффициента масштабирования: -280 * -1 становится 280, и текст рисуется влево от этой точки.

HTML

<canvas id="canvas"></canvas>

JavaScript

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

ctx.scale(-1, 1);
ctx.font = "48px serif";
ctx.fillText("Hello world!", -280, 90);
ctx.setTransform(1, 0, 0, 1, 0, 0);

Результат

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D