Question

我有一个变量context，这是我画布的第二个上下文。

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)。如何重置上下文的比例？

Answer 1

scale将当前变换矩阵乘以比例矩阵，实际上，这些比例因子成倍增加。您可以使用状态堆栈来保存和恢复当前转换：

context.save();
context.scale(2, 2);
... // anything drawn here is twice as big
context.restore();

或者，您可以通过直接加载单位矩阵来重置转换：

context.scale(2, 2);
...
context.setTransform(1, 0, 0, 1, 0, 0);

Answer 2

以下方法更加清晰，但是它是实验性的。也就是说，除IE和Edge之外的所有东西都支持它。

context.resetTransform();

截至2019年，明智的选择仍然是：

ctx.setTransform(1, 0, 0, 1, 0, 0);