Latest web development tutorials

Metodo canvas HTML setTransform ()

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento

Esempi

Disegnare un rettangolo setTransform () reset e creare una nuova matrice trasformare, disegnare un rettangolo di nuovo, ripristinare e creare una nuova matrice di trasformazione, e quindi disegnare un rettangolo di nuovo. Si prega di notare che ogni volta che si chiama setTransform (), che ripristina prima di una matrice di trasformazione e quindi costruire una nuova matrice, nell'esempio qui sotto, il rettangolo rosso non viene visualizzato perché è sotto il rettangolo blu:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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);

Prova »

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer metodo 9, Firefox, Opera, Chrome e Safari supporto setTransform ().

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

Definizione e utilizzo

Ogni oggetto sulla tela ha una matrice di trasformazione in corso.

Metodo setTransform () per la matrice di trasformazione corrente Resetta la matrice, e quindi eseguire con gli stessi parametri del Transform () .

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

Nota: Questo metodo di conversione avrà effetto solo setTransform () viene chiamato dopo il disegno.

sintassi JavaScript: contesto .setTransform (a, b, c, d, e, f);

Valore parametro

参数 描述
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento