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