HTML canvas setTransform()Метод
Объект CanvasПримеры
Нарисуйте прямоугольник, сбросьте и создайте новую матрицу преобразования с помощью 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().
Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
Определение и использование
Каждый объект на canvas имеет текущую матрицу преобразования.
Метод setTransform() сбрасывает текущую матрицу преобразования к единичной матрице, а затем выполняется с теми же параметрами.transform()。
Другими словами, setTransform() позволяет масштабировать, поворачивать, перемещать и наклонять текущую среду.
Примечание:Это преобразование влияет только на рисунки, созданные после вызова метода setTransform().
| Синтаксис JavaScript: | context.setTransform(a,b,c,d,e,f); |
|---|
Значения параметров
| Параметр | Описание |
|---|---|
| a | Масштабировать рисунок по горизонтали. |
| b | Наклонить рисунок по горизонтали. |
| c | Наклонить рисунок по вертикали. |
| d | Масштабировать рисунок по вертикали. |
| e | Переместить рисунок по горизонтали. |
| f | Переместить рисунок по вертикали. |
Другие расширения