Javascript метод scale()

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

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

JavaScript синтаксис:context.scale(scalewidth, scaleheight);

Значения параметров

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

Пример использования

Пример №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);