CanvasRenderingContext2D: метод getTransform()
Базовая линия Широко поддерживается
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
Метод CanvasRenderingContext2D.getTransform() API холста 2D получает текущую матрицу преобразования, применяемую к контексту.
Синтаксис
getTransform()
Параметры
Нет.
Возвращаемое значение
Объект DOMMatrix.
Матрица преобразования описывается следующим образом:
Примечание: Возвращаемый объект не является динамическим, поэтому обновление его не повлияет на текущую матрицу преобразования, а обновление текущей матрицы преобразования не повлияет на уже возвращённый DOMMatrix.
Примеры
В следующем примере у нас есть два элемента <canvas>. Мы применяем преобразование к контексту первого элемента с помощью CanvasRenderingContext2D.setTransform() и рисуем квадрат, затем получаем матрицу с помощью getTransform().
Затем мы применяем полученную матрицу напрямую ко второму контексту холста, передавая объект DOMMatrix напрямую в setTransform(), и рисуем окружность.
HTML
<canvas width="240"></canvas> <canvas width="240"></canvas>
CSS
canvas {
border: 1px solid black;
}
JavaScript
const canvases = document.querySelectorAll("canvas");
const ctx1 = canvases[0].getContext("2d");
const ctx2 = canvases[1].getContext("2d");
ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);
let storedTransform = ctx1.getTransform();
console.log(storedTransform);
ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
ctx2.fill();
Результат
Спецификации
| Спецификация |
|---|
| HTML # dom-context-2d-gettransform-dev |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
getTransform |
68 | 79 | 70 | 55 | 11.1 | 68 | 79 | 48 | 11.3 | 10.0 | 68 |
См. также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D CanvasRenderingContext2D.transform()
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform
