Contoh
Menggambar persegi panjang, menambahkan matriks transformasi baru dengan transform() , menggambar persegi panjang lagi, menambahkan matriks transformasi baru, kemudian menggambar persegi panjang lagi. Perhatikan bahwa setiap kali Anda memanggil transform() , itu didasarkan pada matriks transformasi sebelumnya:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
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); Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| transform() | iya nih | 9.0 | iya nih | iya nih | iya nih |
Definisi dan Penggunaan
Setiap objek pada kanvas memiliki matriks transformasi saat.
The transform() metode menggantikan matriks transformasi saat. Mengalikan matriks transformasi saat ini dengan matriks dijelaskan oleh:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
Dalam kata lain, transform() metode memungkinkan Anda mengatur skala, memutar, bergerak, dan condong konteks saat ini.
Catatan: Transformasi hanya akan mempengaruhi gambar yang dibuat setelah transform() metode ini disebut.
Catatan: transform() metode berperilaku relatif untuk transformasi lain yang dibuat oleh rotate(), scale(), translate() , atau transform() .Contoh: Jika Anda sudah mengatur gambar Anda dengan skala oleh dua, dan transform() metode skala gambar Anda dengan dua, gambar Anda sekarang akan skala empat.
Tip: Check out setTransform() metode, yang tidak berperilaku relatif untuk transformasi lainnya.
| sintaks JavaScript: | context.transform( a,b,c,d,e,f ); |
|---|
Nilai parameter
| Parameter | Deskripsi | Mainkan |
|---|---|---|
| a | Timbangan yang menggambar secara horizontal | Mainkan " |
| b | Condong penyusunan horizontal | Mainkan " |
| c | Condong penyusunan vertikal | Mainkan " |
| d | Timbangan yang menggambar secara vertikal | Mainkan " |
| e | Memindahkan penyusunan horizontal | Mainkan " |
| f | Bergerak dengan menggambar secara vertikal | Mainkan " |