Как я могу использовать reset масштаб холста?
У меня есть переменная, контекст, который является 2-м контекстом моего холста.
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
Вызов context.scale(x,y)
несколько раз масштабирует контекст в зависимости от того, что делали предыдущие шкалы. Например, context.scale(2,2); context.scale(2,2)
эквивалентно context.scale(4,4)
. Как я могу reset масштаб контекста?
Ответы
Ответ 1
scale
будет умножать текущую матрицу преобразования на шкалу масштаба, так что действительно, эти масштабные коэффициенты умножаются. Вы можете использовать стек состояний для сохранения и восстановления текущего преобразования:
context.save();
context.scale(2, 2);
... // anything drawn here is twice as big
context.restore();
В качестве альтернативы вы можете reset преобразовать, непосредственно загрузив идентификационную матрицу:
context.scale(2, 2);
...
context.setTransform(1, 0, 0, 1, 0, 0);
Ответ 2
Следующий метод более понятен, однако он экспериментален. То есть все, кроме IE и Edge, поддерживают его.
context.resetTransform();
По состоянию на 2019 год разумный вариант по-прежнему:
ctx.setTransform(1, 0, 0, 1, 0, 0);
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform#Browser_compatibility