Metode transform() Canvas
Definisi dan penggunaan
Setiap objek di atas kanvas memiliki matrix transformasi saat ini.
transform() Metode menggantikan matrix transformasi yang saat ini. Ia akan mengoperasikan matrix transformasi saat ini dengan matrix di bawah ini:
a c e b d f 0 0 1
Dengan kata lain, transform() memungkinkan Anda untuk mengukur, berputar, bergerak dan menyimpulkan lingkungan saat ini.
Keterangan:Transformasi ini hanya akan mempengaruhi gambar setelah pemanggilan metode transform().
Keterangan:Perilaku metode transform() berbandingkan dengan matrix transformasi yang diatur oleh rotate(),scale(),translate() atau transformasi lain yang selesai dengan transform(). Contohnya: jika Anda sudah menyiarkan gambar ke dua kali lipat, metode transform() akan memperbesar gambar ke dua kali lipat, sehingga gambar Anda akhirnya akan berukuran empat kali lipat.
Petunjuk:Lihat setTransform() Metode, yang tidak akan berperan terhadap transformasi lain.
Contoh
Gambar sebuah persegi; tambahkan matrix transformasi baru dan gambar kembali persegi; tambahkan matrix transformasi baru lagi dan gambar kembali persegi. Perhatikan bahwa setiap kali Anda memanggil transform(), ia akan membangun di atas matrix transformasi yang 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);
Sintaks
context.transform(a,b,c,d,e,f);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| a | Gambar perbesaran horizontal |
| b | Gambar kelistrikan horizontal |
| c | Gambar kelistrikan vertikal |
| d | Gambar perbesaran vertikal |
| e | Gambar gerak horizontal |
| f | Gambar gerak vertikal |
Dukungan peramban
Tabel angka menunjukkan versi peramban pertama yang sepenuhnya mendukung atribut ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.
