Метод масштабирования canvas HTML
Определение и использование
scale() Метод масштабирования текущего чертежа, больше или меньше.
Примечание:Если вы масштабируете чертеж, все последующие чертежи также будут масштабироваться. Локализация также будет масштабироваться. Если вы напишите scale(2,2)тогда чертеж будет расположен в двух倍ном расстоянии от верхнего левого угла холста.
Пример
Пример 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);
Совет:Более подробные примеры можно найти в нижней части страницы.
Синтаксис
context.scale(scalewidth,scaleheight);
Значение параметра
| Параметр | Описание |
|---|---|
| scalewidth | Масштаб ширины текущего чертежа (1=100%, 0.5=50%, 2=200%, и т.д.). |
| scaleheight | Масштаб высоты текущего чертежа (1=100%, 0.5=50%, 2=200%, и т.д.). |
Больше примеров
Пример 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);
Поддержка браузеров
Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Примечание:Интернет-Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
