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

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

取决于您的需求.实际上,您可以使用堆栈,例如,如果您想要使用另一个转换绘制部分放大的图像.使用堆栈的主要缺点是你必须确保匹配你的`save`和`restore`调用,否则你最终会遇到堆栈溢出/下溢.此外,堆栈保存所有状态,而不仅仅是转换.查看https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations了解更多信息. (2认同)
@ANON,除了必须管理保存/恢复堆栈之外,由于必须保存和恢复的属性数量,您还将获得适度的性能损失.如果你只是缩放,`setTransform(1,0,0,1,0,0)`更好. (2认同)
对于性能:不用担心,浏览器足够聪明,只能保存/恢复已更改的内容.保存/恢复的优点是它允许您执行将影响所有"子"绘制的变换.想象一下汽车,例如,当你后来扩展/翻译/ ...汽车时,通过绘制其零件(车轮,......,......),一切顺利.(vs必须更改所有部件绘制功能.) (2认同)

Answer 2

下面的方法更清楚，但它是实验性的。也就是说除了IE和Edge之外的所有浏览器都支持它。

context.resetTransform();

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

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