Question

我正在使用Javascript制作游戏引擎，我希望有一个可以旋转的相机对象。旋转相机时，整个2D场景也会围绕相机的位置旋转。每个视觉实体也可以旋转，这就是他们这样做的方式：

context.save(); //As we are about to change the context's state, we need to save it so it can be restored.

context.translate(entity.position.x + entity.width/2, entity.position.y + entity.height/2); //Translate to the center of the entity so the context can be rotated with the desired effect.
context.rotate(entity.rotation); //In radii.
context.drawImage(entitiy.image, -entity.width/2, -entity.height/2);

context.restore(); //Restore the previous context state so it can be used later by other entities.

我想以类似的方式实现相机旋转。基本上，在浏览所有实体并渲染它们之前，我会这样做：

if (camera.rotation != 0)
{
    renderer.context.save();
    renderer.context.rotate(camera.rotation);
}    

//Loop through entities and render.

然后，在实体完成（并且多次保存和恢复相同的上下文）之后，我想在渲染之前将上下文恢复到它的状态，如下所示：

if (camera.phi != 0)
{
    renderer.context.restore();
}

假设我有2个实体都旋转了一定程度，而且还有一个旋转的相机，过程看起来像这样：

保存
保存
翻译并旋转
从2恢复。
保存
翻译并旋转
从5恢复。
从1恢复。

是否支持此类行为？我实现了它，它似乎工作，虽然有bug，所以我无法正确评估情况......

Answer 1

这应该是适当的行为。记住在保存需要它的画布功能的上下文之后创建新的beginPath（）调用，并在恢复之前适当地关闭路径。

可以看一下：Understanding save() and restore()

我在项目中使用嵌套上下文保存和恢复。你只需要跟踪你头脑中堆叠的位置。因此，如果你改变某些东西，那么当你开始操纵你的下一次保存时，你将会处于转变状态。

canvas是否支持嵌套上下文保存？

1 个答案: