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

【问题标题】：How can I reset the scale of a canvas' context?如何重置画布上下文的比例？
【发布时间】：2016-02-15 03:14:42
【问题描述】：

我有一个变量 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)。如何重置上下文的比例？

【问题讨论】：

【解决方案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);

【讨论】：

谢谢 - 你会推荐哪一个，或者没有区别？
取决于您的需求。实际上，您可以利用堆栈来发挥自己的优势，例如，如果您想通过另一个变换绘制部分放大图像。使用堆栈的主要缺点是您必须确保匹配您的save 和restore 调用，否则最终会出现堆栈上溢/下溢。此外，堆栈保存所有状态，而不仅仅是转换。查看developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/… 了解更多信息。
@ANON，除了必须管理保存/恢复堆栈之外，由于必须保存和恢复的属性数量，您还会受到适度的性能影响。如果您只是缩放，setTransform(1,0,0,1,0,0) 更好。
性能方面：别担心，浏览器足够聪明，只保存/恢复更改的内容。保存/恢复的优点是它允许您执行将影响所有“子”绘制的转换。例如，想画一辆汽车，当您稍后缩放/平移/...汽车时，通过绘制它的零件（车轮、...、...），一切顺利。（相对于必须更改所有部分的绘制功能。）
+1 表示context.setTransform(1, 0, 0, 1, 0, 0);。这是一个很好的通用重置，也是清理包含多个变换的绘图函数的有用方法。

【解决方案2】：

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

context.resetTransform();

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

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

【讨论】：