В этом руководстве вы узнаете, как использовать метод scale() Canvas API в JavaScript для эффективного масштабирования объектов рисования.
scale() — это метод контекста 2D-рисования. Метод scale() добавляет преобразование масштабирования к единицам холста по горизонтали и/или по вертикали.
Единицей по умолчанию на холсте является один пиксель. Преобразование масштабирования изменяет это значение по умолчанию.
Например, коэффициент масштабирования 0,5 изменит размер блока на 0,5 пикселя. Точно так же коэффициент, равный 2, увеличит размер блока до двух пикселей.
Когда размер единицы масштабируется, фигуры также рисуются в новых единицах.
Синтаксис:
ctx.scale(x, y)
Метод scale() принимает два параметра:
x— коэффициент масштабирования в горизонтальном направлении.y— коэффициент масштабирования в вертикальном направлении.
Пример
В следующем примере сначала рисуется прямоугольник, начиная с (10,10) , шириной 100 пикселей и высотой 50 пикселей. Затем добавляется коэффициент масштабирования 2 к холсту как по вертикали, так и по горизонтали. Наконец, мы рисуем прямоугольник с той же шириной и высотой. Однако второй прямоугольник в четыре раза больше первого из-за преобразования.
HTML
<canvas id="canvas" height="300" width="500">
</canvas>JavaScript
const canvas = document.querySelector('#canvas');
if (canvas.getContext) {
// rectangle width and height
const width = 100,
height = 50;
// starting point
const x = 10,
y = 10;
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(x, y, width, height);
ctx.scale(2, 2);
ctx.strokeStyle = 'rgba(0,0,255,.2)';
ctx.strokeRect(x / 2, y / 2, width, height);
}Выход:
