画布变换（Canvas Transform）

优质

小牛编辑

135浏览

2023-12-01

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

Sr.No.	方法和描述
1	transform(m11, m12, m21, m22, dx, dy) 此方法更改转换矩阵以应用参数给出的矩阵。
2	setTransform(m11, m12, m21, m22, dx, dy) 此方法将变换矩阵更改为参数给定的矩阵。

Sr.No.

方法和描述

transform(m11, m12, m21, m22, dx, dy)

此方法更改转换矩阵以应用参数给出的矩阵。

setTransform(m11, m12, m21, m22, dx, dy)

此方法将变换矩阵更改为参数给定的矩阵。

变换（m11，m12，m21，m22，dx，dy）方法必须将当前变换矩阵与以下描述的矩阵相乘 -

m11     m21     dx
m12     m22     dy
0       0       1

setTransform(m11, m12, m21, m22, dx, dy)方法必须将当前变换重置为单位矩阵，然后使用相同的参数调用transform(m11, m12, m21, m22, dx, dy)方法。

例子 (Example)

以下是一个使用transform（）和setTransform（）方法的简单示例 -

<!DOCTYPE HTML>
<html>
   <head>
      <script type = "text/javascript">
         function drawShape() {
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               var sin = Math.sin(Math.PI/6);   
               var cos = Math.cos(Math.PI/6);   
               ctx.translate(200, 200);   
               var c = 0;
               for (var i=0; i <= 12; i++) {
                  c = Math.floor(255/12 * i);
                  ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
                  ctx.fillRect(0, 0, 100, 100);
                  ctx.transform(cos, sin, -sin, cos, 0, 0);
               }
               ctx.setTransform(-1, 0, 0, 1, 200, 200);
               ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
               ctx.fillRect(50, 50, 100, 100);
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   <body onload = "drawShape();">
      <canvas id = "mycanvas" width = "400" height = "400"></canvas>
   </body>
</html>