HTML Referenzhandbuch

Vollständiges HTML-Tag-Verzeichnis

HTML canvas transform() Methode

transform() ist die Canvas 2Das D API verwendet Methoden mehrfacher Überlagerung der aktuellen Transformation, wobei die Matrizen durch die Parameter der Methode beschrieben werden. Sie können das Kontext vergrößern, drehen, verschieben und neigen.

HTML canvas Reference Manual

Online-Beispiel

Zeichnen Sie ein Rechteck, fügen Sie mit transform() eine neue Transformationsmatrix hinzu, zeichnen Sie das Rechteck erneut, fügen Sie eine neue Transformationsmatrix hinzu und zeichnen Sie das Rechteck erneut. Beachten Sie, dass transform()每次调用时都是基于先前的转换矩阵：

Beispiel

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

Testen Sie, ob ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9und Firefox, Opera, Chrome und Safari unterstützen transform() Methode.

Note:Internet Explorer 8 Frühere Versionen unterstützen den <canvas>-Element nicht.

Definition und Verwendung

Jedes Objekt auf der Leinwand hat eine aktuelle Transformationsmatrix.

Die Methode transform() ersetzt die aktuelle Transformationsmatrix. Sie multipliziert die aktuelle Transformationsmatrix mit der folgenden beschriebenen Matrix:

a	c	e
b	d	f
0	0	1

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

Note:This transformation only affects the drawing after the transform() method call.

Note:The behavior of the transform() method is relative to other transformations completed by rotate(), scale(), translate(), or transform(). For example: If you have already set the drawing to double, the transform() method will double the drawing, and your drawing will ultimately be quadrupled.

Hint:Please see setTransform() A method that does not behave relative to other transformations.

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

Parameter Value

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

HTML canvas Reference Manual

HTML: <template> Tag