Метод масштабирования холста HTML ()
Пример
Нарисуйте прямоугольник, масштабируйте до 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);
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
| Method | |||||
|---|---|---|---|---|---|
| scale() | Yes | 9.0 | Yes | Yes | Yes |
Определение и использование
Метод scale() масштабирует текущий рисунок, увеличивая или уменьшая его.
Примечание. Если вы масштабируете чертеж, все будущие чертежи также будут масштабироваться. Позиционирование также будет масштабироваться. Если вы масштабируете (2,2); рисунки будут расположены в два раза дальше от левого и верхнего края холста, чем вы укажете.
| Синтаксис JavaScript: | контекст .scale( масштабная ширина, масштабная высота ); |
|---|
Значения параметров
| Parameter | Description | Play it |
|---|---|---|
| scalewidth | Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) | |
| scaleheight | Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) |
Дополнительные примеры
Пример
Нарисуйте прямоугольник, масштабируйте до 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);
❮ Справочник по холсту HTML