Метод преобразования холста HTML ()
Пример
Нарисуйте прямоугольник, добавьте новую матрицу преобразования с помощью функции transform(), снова нарисуйте прямоугольник, добавьте новую матрицу преобразования, затем снова нарисуйте прямоугольник. Обратите внимание, что каждый раз, когда вы вызываете функцию transform(), она основывается на предыдущей матрице преобразования:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Определение и использование
Каждый объект на холсте имеет текущую матрицу преобразования.
Метод transform() заменяет текущую матрицу преобразования. Он умножает текущую матрицу преобразования на матрицу, описанную следующим образом:
| а | с | е |
| б | г | ф |
| 0 | 0 | 1 |
Другими словами, метод transform() позволяет масштабировать, вращать, перемещать и искажать текущий контекст.
Примечание . Преобразование повлияет только на рисунки, сделанные после вызова метода transform().
Примечание. Метод transform() ведет себя относительно других преобразований, выполняемых методами rotate(), scale(), translate() или transform(). Пример: если вы уже установили масштаб своего рисунка в два раза, а метод transform() масштабирует ваши рисунки в два раза, ваши рисунки теперь будут масштабироваться в четыре раза.
Совет: обратите внимание на метод setTransform() , который не ведет себя по отношению к другим преобразованиям.
| Синтаксис JavaScript: | контекст .transform( 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