пример
Нарисуйте прямоугольник, добавить новую матрицу преобразования с 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); Попробуй сам " Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| transform() | да | 9.0 | да | да | да |
Определение и использование
Каждый объект на холсте имеет текущую матрицу преобразования.
transform() метод заменяет текущую матрицу преобразования. Она умножает текущую матрицу преобразования с матрицей, описываемой:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
Другими словами, transform() метод позволяет масштабировать, вращать, перемещать и искажать текущий контекст.
Примечание: Преобразование будет влиять только на рисунки , сделанные после того , как transform() метод вызывается.
Примечание: transform() метод относительно ведет себя с другими преобразованиями , сделанные rotate(), scale(), translate() или transform() .Пример: Если вы уже установили свой рисунок в масштабе на два, и transform() метод масштабирует свои рисунки на два, ваши рисунки теперь будет шкала на четыре.
Совет: Проверьте setTransform() метод, который не ведет себя по отношению к другим преобразованиям.
| Синтаксис JavaScript: | context.transform( a,b,c,d,e,f ); |
|---|
Значения параметров
| параметр | Описание | Сыграй |
|---|---|---|
| a | Весы рисунок по горизонтали | Сыграй " |
| b | Искажать рисунок по горизонтали | Сыграй " |
| c | Искажать рисунок по вертикали | Сыграй " |
| d | Весы чертеж по вертикали | Сыграй " |
| e | Перемещение чертеж по горизонтали | Сыграй " |
| f | Перемещение чертеж по вертикали | Сыграй " |