Metode transformasi kanvas HTML ()
Contoh
Gambar persegi panjang, tambahkan matriks transformasi baru dengan transform(), gambar persegi panjang lagi, tambahkan matriks transformasi baru, lalu gambar persegi panjang lagi. Perhatikan bahwa setiap kali Anda memanggil transform(), itu dibangun di atas 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);
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Definisi dan Penggunaan
Setiap objek di kanvas memiliki matriks transformasi saat ini.
Metode transform() menggantikan matriks transformasi saat ini. Ini mengalikan matriks transformasi saat ini dengan matriks yang dijelaskan oleh:
| sebuah | C | e |
| B | D | F |
| 0 | 0 | 1 |
Dengan kata lain, metode transform() memungkinkan Anda menskalakan, memutar, memindahkan, dan memiringkan konteks saat ini.
Catatan: Transformasi hanya akan memengaruhi gambar yang dibuat setelah metode transform() dipanggil.
Catatan: Metode transform() berperilaku relatif terhadap transformasi lain yang dibuat oleh rotate(), scale(), translate(), atau transform(). Contoh: Jika Anda telah menyetel gambar Anda ke skala dua, dan metode transform() menskalakan gambar Anda dua kali, gambar Anda sekarang akan diskalakan empat.
Tip: Lihat metode setTransform() , yang tidak berperilaku relatif terhadap transformasi lainnya.
| Sintaks JavaScript: | konteks .transform( a,b,c,d,e,f ); |
|---|
Nilai Parameter
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
Referensi Kanvas HTML