Wie erstelle ich eine Transformationsmatrix mit HTML5?-HTML-Tutorial-php.cn

Wie erstelle ich eine Transformationsmatrix mit HTML5?

PHPz

Freigeben： 2023-08-29 08:45:24

nach vorne

600 Leute haben es durchsucht

Wie erstelle ich eine Transformationsmatrix mit HTML5?

Im folgenden Artikel erfahren Sie, wie Sie mit HTML5 eine Transformationsmatrix erstellen, die Änderungen direkt an der Transformationsmatrix ermöglicht mithilfe der Transformationsmethoden angepasst werden.

Verwendung der transform()-Methode

Die Transformationsmatrix des aktuellen Kontexts kann mit der transform()-Methode geändert werden. Mit anderen Worten: Mit der transform()-Methode können Sie den aktuellen Kontext skalieren, drehen, verschieben und neigen.

Hinweis− Nur Grafiken, die nach dem Aufruf der transform()-Methode erstellt wurden, sind von der Transformation betroffen.

Grammatik

Das Folgende ist die Syntax der transform()-Methode

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

Nach dem Login kopieren

Verwenden Sie die Methode set transform()

Die Funktion transform(a1, b1, c1, d1, e1, f1) wird dann mit denselben Argumenten aufgerufen, nachdem die Methode setTransform(a1, b1, c1, d1, e1, f1) die aktuelle Transformation auf die Identitätsmatrix zurückgesetzt hat.

Grammatik

Folgend ist die Syntax für die set transform()-Methode.

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

Nach dem Login kopieren

Sehen wir uns einige Beispiele an, um Transformationsmatrizen in HTML5 besser zu verstehen

Beispiel 1

Im folgenden Beispiel verwenden wir die Methode transform(), um ein Rechteck zu generieren.

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

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es durch Auslösen der Transformationsmethode eine Ausgabe, die ein Rechteck auf der Webseite zeigt.

Beispiel 2

Im folgenden Beispiel haben wir die Methoden transform() und set transform() verwendet.

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

Nach dem Login kopieren

Beim Ausführen des obigen Skripts wird eine Ausgabe generiert, die mithilfe der Methoden transform() und set transform() auf der Webseite generiert wird.

Beispiel 3

Im folgenden Beispiel erstellen wir einen mathematischen Ausdruck Σ 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>

Nach dem Login kopieren

Wenn der Benutzer versucht, das Skript auszuführen, wird es durch die auf der Webseite mit den Methoden transform() und set transform() generierte Ausgabe angezeigt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Transformationsmatrix mit HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!