Canvas 使用html画布变换的2d纹理的3d正交旋转

我环顾了四周，似乎找不到任何与我正在尝试做的事情相关的东西

正如标题所示，我只想使用

CanvasRenderingContext2D.setTransform（）

-无透视，仅正交旋转来模拟三维正交旋转

到目前为止，我所尝试的：

在2D平面中围绕45*矢量旋转非常简单，我使用

setTransform（scaleFactor、skewAngle、skewAngle、scaleFactor、0.5*宽、0.5*高）

看起来，画布的中心，同样的

x

和

y

skew提供了正确的旋转，但是我在确定比例因子时遇到了困难，因为当旋转角度（skewAngle）接近90*时，倾斜变为无穷大

我需要的是： 围绕2D平面中的任何向量旋转和适当缩放，例如，基于垂直向量（鼠标位置-中心画布）-朝向（或远离）鼠标光标

如果有人能帮我把这个分解一下，我将不胜感激。如果有一篇文章专门解释这一点，那也太好了

---

提前谢谢

好吧，我来解决。不太危险

我用

setTransform（）

做这件事很困难

下面是一个简单的例子： //使用processing.js 背景（0）

// rotate by 5 degrees each frame
a = (a + 5) % 360;
var c = Math.cos(a * Math.PI / 180);

// processing.js provides mouseX and mouseY, width and height
var dx = mouseX - 0.5*width,
    dy = mouseY - 0.5*height;

// orthogonal to mouse position from center position
var b = Math.atan2(-dx, dy);

var ctx = this.externals.context;

ctx.save();
ctx.translate(0.5 * width, 0.5 * height);
ctx.rotate(b);
ctx.scale(1, c);
ctx.rotate(-b);
text("G", 0, 0);
ctx.restore();

ctx.save();
ctx.scale(1e-1, 1e-1);
// text size is 100px, position is centered at x, y
text("angle: " + a, 250, 50);
ctx.restore();