如何使用HTML5创建转换矩阵？

HTML5 canvas提供了允许直接修改转换矩阵的方法。转换矩阵最初必须是身份转换。然后可以使用转换方法对其进行调整。

S号	方法和说明
1	变换(m11,m12,m21,m22,dx,dy) 此方法更改转换矩阵以应用参数指定的矩阵。
2	setTransform(m11,m12,m21,m22,dx,dy) 此方法将转换矩阵更改为参数指定的矩阵。

transform(m11,m12,m21,m22,dx,dy)方法必须将当前变换矩阵与-所描述的矩阵相乘

m11   m21   dx
m12   m22   dy
0     0     1

要创建转换矩阵，请使用MathML。

示例

以下是使用transform()和setTransform()方法的简单示例：

<!Doctype html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Pythagorean theorem</title>
   </head>

   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
         <mrow>
            <msup>
               <mi>a</mi>
               <mn>2</mn>
            </msup>
            <mo> + </mo>
            <msup>
               <mi>b</mi>
               <mn>2</mn>
            </msup>
            <mo> = </mo>
            <msup>
               <mi>c</mi>
               <mn>2</mn>
            </msup>
         </mrow>
      </math>
   </body>
</html>


<!doctype html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Pythagorean theorem</title>
   </head>

   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
         <mrow>
            <msup>
               <mi>a</mi>
               <mn>2</mn>
            </msup>
            <mo> + </mo>
            <msup>
               <mi>b</mi>
               <mn>2</mn>
            </msup>
            <mo> = </mo>
            <msup>
               <mi>c</mi>
               <mn>2</mn>
            </msup>
         </mrow>
      </math>
   </body>
</html>

基础教程