javascript - 为什么 context.restore() 不会将上下文的比例设置回 (1, 1)？

Question

我正在制作一个 HTML5 游戏引擎，我希望我的 Camera 对象有一个 zoom 属性。在渲染器中，我认为我可以很容易地实现它，就像这样:

context.save();
context.scale(camera.zoom, camera.zoom);
draw();
context.restore();

不过有个问题。当我第一次测试这个时，相机似乎永远变焦!我认为 context.save() 和 context.restore() 可能没有按预期工作，上下文的内部缩放因子乘以相机的 无限放大。

这解决了这个问题:

context.save();
context.scale(camera.zoom, camera.zoom);
draw();
context.scale(1/camera.zoom, camera.zoom);
context.restore();

这现在有效，但恐怕这不是最优雅/最快速的解决方案。另外，我认为可能由于浮点计算不精确，比例因子总是略有变化。也就是说，1/camera.zoom 可能不会总是产生相同的结果。

那么，两个问题:

1. 为什么 context.restore() 不会将上下文的比例设置回 (1, 1)？
2. 如何手动操作上下文的缩放比例？

---

编辑:

有人指出 context.save() 和 context.restore() 的数量可能不同，但事实并非如此.

我是这样测量的:

renderer.context.save = (function()
{
    var original = renderer.context.save;

    return function()
    {
        renderer.saved ++;
        original.call(renderer.context);
    }
})();

renderer.context.restore = (function()
{
    var original = renderer.context.restore;

    return function()
    {
        renderer.saved --;
        original.call(renderer.context);
    }
})();

renderer.saved 值是 1 就在最后一次恢复上下文之前(绘制之后)，每次渲染之后都是 0 .

Answer 1

看来我不小心解决了这个问题。现在可以使用了。

主要怀疑是这部分代码:

renderer.context.save();

//Erase everything.
renderer.context.globalAlpha = 1;
renderer.context.fillStyle = renderer.settings.fillStyle;
renderer.context.fillRect(0, 0, renderer.width, renderer.height);

//Zoom.
renderer.context.scale(camera.zoom, camera.zoom);

我相信我曾经在实际保存上下文之前进行缩放，导致恢复对缩放没有影响。