HTML-холст преобразование () метод
примеров
Нарисуйте прямоугольник с помощью преобразования (), чтобы добавить новую матрицу преобразования, вновь привлечь прямоугольник, добавить новую матрицу преобразования, затем нарисуйте прямоугольник снова. Обратите внимание, что всякий раз, когда вы звоните преобразование (), он будет первым, чтобы построить преобразование на матрице:
JavaScript:
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);
Попробуйте »
Поддержка браузеров
Internet Explorer 9, поддержка Firefox, Opera, Chrome и Safari преобразование () метод.
Примечание: 8 и более ранние версии Internet Explorer не поддерживают элемент <Canvas>.
Определение и использование
Каждый объект на холсте имеет текущую матрицу преобразования.
преобразование () метод заменяет текущую матрицу преобразования. Это операция матрица описана ниже для текущей матрицы преобразования:
| с | е | |
| б | d | е |
| 0 | 0 | 1 |
Другими словами, преобразование () позволяет увеличивать, вращать, перемещать и наклонять текущую среду.
Примечание: Это преобразование будет влиять только метод преобразования () вызывается после того, как на чертеже.
Примечание: Поведение преобразования () метод по отношению к другой преобразуются поворота (), масштаб (), переводить () или преобразование () завершено.Например: Если вы уже установили в чертеж в два раза, то преобразование () метод будет увеличить рисунок, чертеж в конечном итоге будет увеличен в четыре раза.
Совет: Проверьте SetTransform () метод, который не происходит по отношению к другому поведению преобразования.
| Синтаксис JavaScript: | Контекст .transform (а, б, в, г, д, е); |
|---|
Параметр Значение
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |