具有缩放和旋转的视差效果

Question

我目前正在试验我计划在我的 HTML5 画布游戏引擎中实现的视差效果。 效果本身很容易实现，但是当你添加缩放和旋转时，事情变得有点复杂，至少对我来说是这样。我的目标是实现这样的目标：Youtube video.

如您所见，您可以“到中心”放大和缩小，还可以围绕它旋转并获得视差效果。

在我的引擎中，我希望有多个画布作为我的视差层，我将翻译它们。 我想出了这样的事情：

var parallax = {
    target: {
        x: Mouse.x,
        y: Mouse.y
    },
    offset: {
        x: -ctx.width / 2,
        y: -ctx.height / 2
    },
    factor: {
        x: 1,
        y: 1
    }
}

var angle = 0;
var zoomX = 1;
var zoomY = 1;

var loop = function(){
    ctx.canvas.width = ctx.canvas.width; //Clear the canvas.

    ctx.translate(parallax.target.x * parallax.factor.x, parallax.target.y * parallax.factor.y);
    ctx.rotate(angle);
    ctx.scale(zoomX, zoomY);
    ctx.translate((-parallax.target.x - parallax.offset.x) * parallax.factor.x, (-parallax.target.y - parallax.offset.y) * parallax.factor.y);

    Draw(); //Function that draws all the objects on the screen.
}

这是我脚本的一个非常小且简化的部分，但我希望这足以完成我正在做的事情。对象“视差”包含目标位置、偏移量（与目标的距离）以及确定画布相对于目标移动速度的因素。 ctx 是向目标相反方向移动的画布。（在此示例中，我只使用一层。）我使用鼠标作为“目标”，但我也可以使用播放器或其他一些对象具有 x 和 y 属性。目标也是我旋转和缩放画布的点。

只要因子等于 1，此方法就完全可以正常工作。如果是其他东西，整个事情会突然停止正常工作，当我尝试缩放时，它会缩放到左上角，而不是目标。我还注意到，如果我缩小太多，画布不会以与目标相反的方式移动，而是朝同一个方向移动。

所以我的问题是：通过缩放和旋转实现视差的正确方法是什么？

附：使用画布作为图层对我来说很重要。

Answer 1

要为下一个动画帧做准备，您必须以与执行相反的顺序撤消任何先前的变换：

context.translate(x,y);
context.scale(sx,sy);
context.rotate(r);
// draw stuff
context.rotate(-r);
context.scale(-sx,-sy);
context.translate(-x,-y);

或者，您可以使用context.save / context.restore 撤消之前的转换。

• 调整当前帧的视差值，
• 使用 context.save() 保存未转换的上下文状态，
• 进行变换（平移、缩放、旋转等），
• 在您的平移点使用 [0,0] 将您的对象绘制在未转换的空间中，
• 使用 context.restore()/
将您的上下文恢复到未转换的状态

无论哪种方式都会正确地为您提供一个面向默认的画布，用于您的下一个动画帧。

您应用的确切视差效果取决于您自己的设计，但使用这些方法将使画布恢复到正常的默认状态以供您设计。