Метод 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%, затем еще раз нарисуем прямоугольник:
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%, и еще раз нарисуем прямоугольник:
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);