Метод 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() | Yes | 9.0 | Yes | Yes | Yes |
Определение и использование
Каждый объект на холсте имеет текущую матрицу преобразования.
Метод setTransform() сбрасывает текущее преобразование в единичную матрицу, а затем запускает transform() с теми же аргументами.
Другими словами, метод setTransform() позволяет масштабировать, вращать, перемещать и искажать текущий контекст.
Примечание . Преобразование повлияет только на рисунки, сделанные после вызова метода setTransform.
| Синтаксис JavaScript: | контекст .setTransform( a,b,c,d,e,f ); |
|---|
Значения параметров
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ Справочник по холсту HTML