HTML Referenzhandbuch

HTML Tag-Übersicht

HTML canvas setTransform() Methode

setTransform() ist ein Canvas 2D API setzt mit der Einheitsmatrix (überschreibt) die aktuelle Transformation zurück und ruft die Transformation Methoden auf, die von den Variablen der Methode beschrieben werden.

HTML canvas Reference Manual

Online-Beispiel

Zeichnen Sie ein Rechteck, verwenden Sie setTransform(), um eine neue Transformationsmatrix zu erstellen und zu setzen, zeichnen Sie das Rechteck erneut, erstellen und setzen Sie eine neue Transformationsmatrix, zeichnen Sie das Rechteck erneut. Beachten Sie, dass die rote Fläche im folgenden Beispiel nicht angezeigt wird, da sie unter der blauen Fläche liegt:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Verwendung der Methode HTML canvas setTransform()-Grundtutorials(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tags.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
</script>
</body>
</html>

Testen Sie heraus ‹/›

Browser-Kompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support setTransform() Method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

Each object on the canvas has a current transformation matrix.

The setTransform() method resets the current transformation to the unit matrix and then runs transform().

In other words, setTransform() allows you to scale, rotate, move, and skew the current environment.

Note:This transformation will only affect the drawing after the setTransform() method call.

JavaScript Syntax:	context.setTransform(a,b,c,d,e,f);

Parameter Value

Parameter	Description
a	Horizontal scaling drawing.
b	Horizontal skew drawing.
c	Vertical skew drawing.
d	Vertical scaling drawing.
e	Horizontal movement drawing.
f	Vertical movement drawing.

HTML canvas Reference Manual

HTML: <template> Tag