Latest web development tutorials

HTML canvas setTransform () metode

Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML

contoh

Menggambar persegi panjang dengan setTransform () ulang dan membuat matriks transformasi baru, menggambar persegi panjang lagi, reset dan membuat matriks transformasi baru, dan kemudian menggambar persegi panjang lagi. Harap dicatat bahwa setiap kali Anda memanggil setTransform (), yang me-reset sebelum matriks transformasi dan kemudian membangun sebuah matriks baru, pada contoh di bawah, persegi panjang merah tidak ditampilkan karena berada di bawah persegi panjang biru:

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

Coba »

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome dan Safari dukungan setTransform () metode.

Catatan: 8 dan versi sebelumnya dari Internet Explorer tidak mendukung <canvas> elemen.

Definisi dan Penggunaan

Setiap objek pada kanvas memiliki matriks transformasi saat.

setTransform () metode untuk matriks transformasi saat Mereset matriks, dan kemudian jalankan dengan parameter yang sama Transform () .

Dengan kata lain, setTransform () memungkinkan Anda untuk memperbesar, memutar, bergerak dan miring lingkungan saat ini.

Catatan: metode konversi ini hanya akan mempengaruhi setTransform () disebut setelah gambar.

sintaks JavaScript: konteks .setTransform (a, b, c, d, e, f);

Nilai parameter

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

Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML