HTML reference manual

HTML tag大全

HTML canvas setTransform() method

setTransform() is a method in the Canvas 2D API that resets (overwrites) the current transformation using the unit matrix and calls the transformation method, which is described by the variables of the method.

Manuale di riferimento per HTML canvas

Online Example

Draw a rectangle, use setTransform() to reset and create a new transformation matrix, draw the rectangle again, reset and create a new transformation matrix, and then draw the rectangle again. Note that the red rectangle is not displayed in the following example because it is below the blue rectangle:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas setTransform() method usage - Basic Tutorial (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</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>

Test and see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano setTransform() Metodi.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Ogni oggetto sullo schermo ha una matrice di trasformazione corrente.

Il metodo setTransform() riporta la trasformazione corrente a matrice unitaria e poi esegue transform().

In altre parole, setTransform() ti permette di zoommare, ruotare, spostare e inclinare l'ambiente corrente.

Attenzione:Questa trasformazione influisce solo sul disegno dopo la chiamata al metodo setTransform().

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

Valore del parametro

Parametro	Descrizione
a	Zoom orizzontale del disegno.
b	Inclinazione orizzontale del disegno.
c	Inclinazione verticale del disegno.
d	Zoom verticale del disegno.
e	Spostamento orizzontale del disegno.
f	Spostamento verticale del disegno.

Manuale di riferimento per HTML canvas

HTML: <template> etichetta