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