如何使用HTML5创建一个变换矩阵？

PHPz 转载: 2023-08-29 08:45:24 191浏览

如何使用HTML5创建一个变换矩阵？

In the following article, we are going to learn about how to create a transformation matrix with HTML5. HTML5 canvas provides methods that allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.

Using the transform() method

The transformation matrix of the current context can be changed using the transform() method.in other words,transform() method lets you scale, rotate, move, and skew the current context.

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

语法

以下是transform()方法的语法

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

使用set transform()方法

The transform(a1, b1, c1, d1, e1, f1) function is then called with the same arguments after the setTransform(a1, b1, c1, d1, e1, f1) method resets the current transform to the identity matrix.

语法

Following is the syntax for set transform() method.

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

让我们来看一些示例，以更好地理解HTML5中的变换矩阵

Example 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>

当脚本被执行时，它将通过触发变换方法，在网页上生成一个显示矩形的输出。

Example 2

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

<!DOCTYPE HTML>
<html>
<head>
   <script>
      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>

On running the above script, it will generate an output generated by using transform() and set transform() methods on the webpage.

Example 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()方法生成的输出进行显示。

以上就是如何使用HTML5创建一个变换矩阵？的详细内容，更多请关注php中文网其它相关文章！

html 矩阵变换 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：HTML 5本地存储子域的大小限制下一条：使用自定义标签和 Shadow DOM 增强 HTML