javascript - 为什么没有办法在 canvas.getContext ('2d' ).setTransform(a,b,c,d,e,f) 中旋转，什么是最好的旋转

Question

我正在玩弄 HTML5 Canvas ，我正在尝试实现一种使用平移、缩放和旋转在 Canvas 上四处移动图像的方法。

我已经使用 setTransform 进行了转换和缩放:

canvas.getContext('2d').setTransform(a,b,c,d,e,f)

这很方便，因为它会丢弃之前应用的变换，然后应用新的变换，因此在缩放等时无需记住之前的状态。

On W3 schools表示第二个和第三个参数是 skewY 和 skewX，我最初假设是旋转 x 和 y。然而，在应用将一些值传递给这些参数的变换后，它似乎没有旋转——它使 Canvas 倾斜! (我知道很奇怪 :-D)。

谁能告诉我为什么在集合变换中没有旋转(我很感兴趣，因为它看起来很奇怪，而且倾斜对我来说似乎毫无用处)，以及围绕 a 的中心旋转的最佳方法是什么 Canvas 以及同时使用 setTransform？

Answer 1

setTransform 基于二维矩阵 (3x3)。这些类型的矩阵用于 2D/3D 投影，如今通常由游戏引擎处理，而不是制作游戏的程序员。

这些东西有点线性代数和微积分(用于旋转)。

你不会非常喜欢这个，但这是你正在做的事情:

function degs_to_rads (degs) { return degs / (180/Math.PI); }
function rads_to_degs (rads) { return rads * (180/Math.PI); }

从这些辅助函数开始，因为虽然我们在度数方面思考得很好，但计算机和数学系统在弧度方面表现得更好。

然后你想开始计算你的旋转:

var rotation_degs = 45,
    rotation_rads = degs_to_rads(rotation_degs),

    angle_sine = Math.sin(rotation_rads),
    angle_cosine = Math.cos(rotation_rads);

然后，根据参数的布局:

ctx.setTransform(scaleX, skewY, skewX, scaleY, posX, posY);

按照以下顺序，重新排列成变换矩阵时:

//| scaleX, skewX,  posX |
//| skewY,  scaleY, posY |
//| 0,      0,      1    |

...您需要提交以下值:

ctx.setTransform(angle_cosine, angle_sine, -angle_sine, angle_cosine, x, y);
// where x and y are now the "centre" of the rotation

这应该让你顺时针旋转。

边际 yield 是您应该能够将所有内容乘以您最初想要的比例(尽管不要乘以 posX 和 posY)。