Javascript 画布：如何在一个转换语句中完成平移、倾斜、旋转？

最近几天我在学习“变换”，现在我知道如何通过变换的matirx进行平移、旋转、倾斜和缩放。但如果我想在一个transform语句中执行上述所有操作，我该怎么做

ctx.transform(a,b,c,d,e,f);

当我们想要通过变换旋转某个对象时，我们必须为每个对象（a、b、c、d）提供4个参数，因此，如果我想要旋转和缩放，例如，旋转30度和缩放（1.5,2），变换可以同时完成吗？那么（a，b，c，d）的值是多少？如何计算它们

---

还有一个问题：在转换中是否存在顺序？我的意思是，如果我使用变换来旋转、缩放和平移，它们之间的顺序是什么？毕竟，顺序非常重要，“先翻译，后缩放”和“先缩放，后平移”会得到不同的结果。

这里有各种各样的灵活性，这可能是您所需要的。例如，见：

然后看这里：

---

每个变换函数都使用4*4矩阵进行数学描述， 要执行一个以上的函数，例如旋转和缩放，则需要将为每个函数创建的4*4矩阵相乘

有关变换函数的数学描述的详细信息，请参阅<>

有关如何应用多个变换的详细信息，请参阅矩阵、向量和矩阵x3d（） 章节

根据给定的顺序，变换有一个顺序 每个函数都不具有任何优先级， 假设翻译（200）和翻译（200）的比例（10）不同，这是显而易见的 矩阵乘法一般是不可交换的

---

AB≠ BA

这是由上下文完成的数学。转换（a，b，c，d，e，f）

使用单个context.transform执行多个操作时（平移+缩放+旋转）

• 翻译先完成
• 接下来进行缩放和旋转（顺序无关紧要）

这是javascript形式的矩阵数学：

    // a=0, b=1, c=2, d=3, e=4, f=5

    // declare an array that will hold our transform math
    // this is the identity matrix (where no transforms exist)
    var matrix=[1,0,0,1,0,0];

    // for example, 

    // rotate 30 degrees clockwise from 0 degrees
    // note: 0 degrees extends rightward horizontally from the origin
    rotate(30*Math.PI/180);

    // scale by 1.5 in X and 2.0 in Y scales
    scale(1.5,2,0);

    // plug our transform array into the context
    context.transform(matrix[0],matrix[1],matrix[2],matrix[3],matrix[4],matrix[5]);



    // do the translate to the array 
    function translate(x,y){
        matrix[4] += matrix[0] * x + matrix[2] * y;
        matrix[5] += matrix[1] * x + matrix[3] * y;
    }

    // do the scale to the array
    function scale(x,y){
        matrix[0] *= x;
        matrix[1] *= x;
        matrix[2] *= y;
        matrix[3] *= y;    
    }

    // do the rotate to the array
    function rotate(radians){
        var cos = Math.cos(radians);
        var sin = Math.sin(radians);
        var m11 = matrix[0] * cos + matrix[2] * sin;
        var m12 = matrix[1] * cos + matrix[3] * sin;
        var m21 = -matrix[0] * sin + matrix[2] * cos;
        var m22 = -matrix[1] * sin + matrix[3] * cos;
        matrix[0] = m11;
        matrix[1] = m12;
        matrix[2] = m21;
        matrix[3] = m22;   
    }

---

很好，如果我知道这些，我就能深入理解。你能为我写一个“旋转30度并缩放（1.5,2）”的变换吗？谢谢你的回复，你的代码让我知道如果我使用这些函数，我可以控制转换的顺序，这是我的目标，谢谢。你能给我看看“歪斜”函数吗？对不起，我的数学太弱了…斜变换：函数斜（radiansX，radiansY）{var tanX=radiansX；//Math.tan（radiansX）；var tanY=radiansY；//Math.tan（radiansY）；var matrix0=matrix[0]；var matrix1=matrix[1]matrix[0]+=tanYmatrix[2]；matrix[1]+=tanYmatrix[3]；矩阵[2]+=tanxMatrix；矩阵[3]+=tanxMatrix；}