scale()

Метод scale() изменяет масштаб текущего графического объекта, делает его больше или меньше.

Примечание: Если вы изменяете масштаб какого-нибудь графического объекта, то будущие графические объекты также изменят масштаб. Позиционирование также будет масштабироваться. Если вы зададите команду scale(2,2), то графические объекты будут позиционированы в два раза дальше от левой и верхней точки, заданной вами.

Синтаксис

context.scale(scalewidth, scaleheight);

Параметры

scalewidth

Масштабирует ширину текущего графического объекта (1=100%, 0.5=50%, 2=200% и т. д.)

scaleheight

Масштабирует высоту текущего графического объекта (1=100%, 0.5=50%, 2=200% и т. д.)

Спецификация

• HTML Living Standard

Примеры

Пример 1

Нарисуем прямоугольник, изменим масштаб на 200%, затем еще раз нарисуем прямоугольник:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.strokeRect(5, 5, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(5, 5, 25, 15)

Пример 2

Нарисуем прямоугольник, изменим масштаб на 200%, опять нарисуем прямоугольник, изменим масштаб на 200%, и еще раз нарисуем прямоугольник, снова изменим масштаб на 200%, и еще раз нарисуем прямоугольник:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.strokeRect(5, 5, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(5, 5, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(5, 5, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(5, 5, 25, 15)

Ссылки

• Метод scale() ^{MDN (рус.)}