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%
и т. д.)
Спецификация¶
Примеры¶
Пример 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)
Ссылки¶
- Метод
scale()
MDN (рус.)