如何使用 HTML5 创建变换矩阵?

htmlweb developmentfront end technology更新于 2024/8/13 6:04:17

在下一篇文章中，我们将学习如何使用 HTML5 创建变换矩阵。HTML5 Canvas 提供了允许直接修改变换矩阵的方法。变换矩阵最初必须是恒等变换。然后可以使用变换方法进行调整。

使用 transform() 方法

可以使用 transform() 方法更改当前上下文的变换矩阵。换句话说，transform() 方法允许您缩放、旋转、移动和倾斜当前上下文。

注意− 只有在调用 transform() 方法后创建的绘图才会受到变换的影响。

语法

以下是 transform() 方法的语法

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

使用 set transform() 方法

然后使用相同的参数调用 transform(a1, b1, c1, d1, e1, f1) 函数setTransform(a1, b1, c1, d1, e1, f1) 方法将当前变换重置为单位矩阵。

语法

以下是 set transform() 方法的语法。

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

为了更好地理解 HTML5 中的变换矩阵，我们来看以下示例。

示例 1

在下面的示例中，我们使用 transform() 方法生成一个矩形。

<!DOCTYPE html>
<html>
<body>
   <canvas id="tutorial" width="300" height="400"></canvas>
   <script>
      var canvas = document.getElementById("tutorial");
      if (canvas.getContext){
         var ctx = canvas.getContext('2d');
         ctx.beginPath();
         ctx.lineWidth = "4";
         
         var cos=Math.cos(45*Math.PI / 180);
         var sin=Math.cos(45*Math.PI / 180);
         
         ctx.transform(cos, sin, -sin, cos, 160, 20);
         ctx.strokeStyle = "green";
         ctx.strokeRect(60, 60, 160, 160);
         ctx.stroke();
      }
   </script>
</body>
</html>

脚本执行时，将触发 transform 方法，生成一个输出，显示网页上绘制的矩形。

示例 2

在下面的示例中，我们将使用 transform() 和 set transform() 方法。

<!DOCTYPE HTML>
<html>
<head>
   <script>
      function drawShape(){
         // 使用 DOM 获取画布元素
         var canvas = document.getElementById('mycanvas');

         // 确保当画布不受支持时我们不会执行
         if (canvas.getContext){

            // 使用 getContext 使用画布进行绘图
            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>

运行上述脚本后，它将在网页上使用 transform() 和 set transform() 方法生成输出。

示例 3

在下面的示例中，我们创建一个数学表达式 Σ n = 1。

<!DOCTYPE html>
<html>
<body onload="tutorial();">
   <canvas id = "mytutorial" width = "400" height = "450"></canvas>
   <script>
      function tutorial() {
         const ctx = document.getElementById('mytutorial').getContext('2d');
         const sin = Math.sin(Math.PI / 6);
         const cos = Math.cos(Math.PI / 6);
         ctx.translate(100, 100);
         let c = 0;
         for (let i = 0; i <= 10; i++) {
            c = Math.floor(255 / 12 * i);
            ctx.fillStyle = `rgb(88, 214, 141 )`;
            ctx.fillRect(0, 0, 100, 10);
            ctx.transform(cos, sin, -sin, cos, 0, 0);
         }
         ctx.setTransform(-1, 0, 0, 1, 100, 100);
         ctx.fillStyle = 'rgb(211, 84, 0,0.5 )';
         ctx.fillRect(0, 50, 100, 100);
      }
   </script>
</body>
</html>

当用户尝试执行脚本时，它将在网页上显示使用 transform() 和 set transform() 方法生成的输出。