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.
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.
Das Folgende ist die Syntax der transform()-Methode
ctx.transform(m11, m12, m21, m22, dx, dy)
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.
Folgend ist die Syntax für die set transform()-Methode.
ctx.setTransform(m11, m12, m21, m22, dx, dy)
Sehen wir uns einige Beispiele an, um Transformationsmatrizen in HTML5 besser zu verstehen
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>
Wenn das Skript ausgeführt wird, generiert es durch Auslösen der Transformationsmethode eine Ausgabe, die ein Rechteck auf der Webseite zeigt.
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>
Beim Ausführen des obigen Skripts wird eine Ausgabe generiert, die mithilfe der Methoden transform() und set transform() auf der Webseite generiert wird.
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>
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!
