如何重置画布上下文的比例尺？

Question

我有一个变量context，它是画布的2d上下文。

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