如何重置 canvas' 上下文的比例？

Question

我有一个变量context，它是我canvas的二维上下文。

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);

How can I reset the scale of a canvas' context?