Javascript 画布-在2d设置中更改相机的透视图

TLDR： 我需要更改2d cavas中对象的透视图

比如说，我坐在书桌旁边，给书桌拍了张照片。我想改变这张照片，让它看起来像是我从上面看到的一样。基本上，视图会如下图所示发生变化（是的，我的绘画技巧很棒：））

我正在使用canvas和easeljs（createjs）

我完全知道这不是第三个物体，我没有舞台和照相机。我也知道easeljs不支持这项功能。

我实际上是想模仿这一点（在这一点上，我对结果的质量也不感兴趣）

我所尝试的和成功了（我注意到我不是第一个尝试这样做的人，也没有找到真正的答案，所以这是我目前的方法）：

我照原图。将其分成大量图像（越高越好），如下图所示

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

for（变量i=0；i<400；i++）{
crops[i]=新建createjs.Bitmap（baseImage）；
crops[i].sourceRect=newcreatejs.Rectangle（0，i，700，i+1）；
作物[i].regX=350；
作物[i].y=i-1；
作物[i].x=100；
作物[i].scaleX=（400-i/2）*角因子；
阶段.addChild（作物[i]）；
}

然后，您只需再次裁剪相关部分

好的。。。所以这是可行的，但性能是。。。糟糕-你基本上生成了400张图片-在这种情况下-然后你把它们放在画布上。是的，我知道它可以优化一点，但仍然很糟糕。所以我想知道你是否有其他（更好的）方法

---

我还尝试将倾斜变换与比例和旋转相结合，但我无法获得正确的结果（但我仍然认为这里可能还有一些东西……我只是无法将手指放在上面，我的“真实”数学有点生疏）。

你检查过这个吗@gMirian实际上是的，我在发布之前检查过：）。被接受的答案并没有真正的帮助。。。基本上和我的预感一样。另一个答案稍微好一点，但没有设法用它来实现我所需要的（我明天会再试一次，因为睡眠通常有帮助）。2D矩阵的问题在于它会锁定变换矩阵的第三行（因为是0 0 1边界，所以可以使用单个矩阵添加乘法和加法变换）。这就是我在尝试问题末尾提到的转换组合时使用的矩阵。

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