Метод setTransform () холста HTML
Пример
Нарисуйте прямоугольник, сбросьте и создайте новую матрицу преобразования с помощью setTransform(), снова нарисуйте прямоугольник, сбросьте и создайте новую матрицу преобразования, затем снова нарисуйте прямоугольник. Обратите внимание, что каждый раз, когда вы вызываете setTransform(), он сбрасывает предыдущую матрицу преобразования, а затем строит новую матрицу, поэтому в приведенном ниже примере красный прямоугольник не показан, потому что он находится под синим прямоугольником:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Определение и использование
Каждый объект на холсте имеет текущую матрицу преобразования.
Метод setTransform() сбрасывает текущее преобразование в единичную матрицу, а затем запускает transform() с теми же аргументами.
Другими словами, метод setTransform() позволяет масштабировать, вращать, перемещать и искажать текущий контекст.
Примечание . Преобразование повлияет только на рисунки, сделанные после вызова метода setTransform.
| Синтаксис JavaScript: | контекст .setTransform( a, b, c, d, e, f ); |
|---|
Значения параметров
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawings horizontally | |
| b | Skews the drawings horizontally | |
| c | Skews the drawings vertically | |
| d | Scales the drawings vertically | |
| e | Moves the the drawings horizontally | |
| f | Moves the the drawings vertically |
❮ Объект холста