HTML-холст SetTransform метод ()

примеров

Нарисуйте прямоугольник с помощью SetTransform () сброса и создать новую матрицу преобразования, нарисуйте прямоугольник снова, восстановить и создать новую матрицу преобразования, а затем нарисуйте прямоугольник снова. Обратите внимание, что всякий раз, когда вы звоните SetTransform (), которая сбрасывает перед матрицей преобразования, а затем построить новую матрицу, в приведенном ниже примере, красный прямоугольник не отображается, так как он находится ниже синего прямоугольника:

JavaScript:

var c=document.getElementById("myCanvas");
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	垂直移动绘图。

HTML холст Справочное руководство

Предыдущая: HTML холст преобразование () метод