画布 - 在2d设置中更改相机的视角

Question

TLDR： 我需要改变2d cavas中对象的视角。

让我说我坐在旁边的时候拍了一张桌子的照片。我想改变那个图像，看起来好像我会从上面看到它。基本上，视图会像下面的图像一样改变（是的，我的绘画技巧很棒:)）。）。

我正在使用canvas和easeljs（createjs）。

我完全清楚这不是第三个对象，我没有舞台和相机。我也知道画架不支持这个功能。

我实际上尝试的是模仿这一点（此时我对结果的质量也不感兴趣）。

我尝试了什么并且它有效（我注意到我不是第一个尝试这样做但实际上没有找到真正的答案所以这是我目前的方法）：

我拍摄原始图像。将其划分为大量图像（越高越好），如下图所示。

然后我用不同的因子缩放x轴上的每个“迷你图像”（我根据图片的角度计算）。以下相关代码的一部分（借口硬编码和令人毛骨悚然的代码 - 来自我在10分钟内制作的概念证明）：

            for (var i = 0; i < 400; i++) {
                crops[i] = new createjs.Bitmap(baseImage);
                crops[i].sourceRect = new createjs.Rectangle(0, i, 700, i + 1);
                crops[i].regX = 350;
                crops[i].y = i - 1;
                crops[i].x = 100;
                crops[i].scaleX = (400 - i / 2) * angleFactor;
                stage.addChild(crops[i]);
            }

然后再次裁剪相关部分。

好的......所以这样可行，但性能很糟糕 - 你基本上会产生400张图像 - 在这种情况下 - 然后你把它们放在画布上。是的，我知道它可以稍微优化但仍然非常糟糕。所以我想知道你是否有其他（最好是更好的）方法。

我还尝试将倾斜变换与刻度和旋转结合起来但是我无法达到正确的结果（但我实际上仍然认为这里可能还有一些东西......我只是不能把手指放在它上面我的“真实”数学有点生疏了。