Метод Canvas scale()
Определение и использование
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>.
