Metode HTML canvas transform()
Definisi dan Penggunaan
Setiap objek di atas kanvas memiliki matriks transformasi saat ini.
transform() Metode untuk menggantikan matriks transformasi saat ini. Dia akan mengoperasikan matriks transformasi saat ini dengan matriks di bawah ini:
a c e b d f 0 0 1
Dengan kata lain, transform() memungkinkan Anda mengukur, memutar, memindahkan, dan mengecas lingkungan saat ini.
Keterangan:Transformasi ini hanya akan mempengaruhi gambar yang diatur setelah pemanggilan transform().
Keterangan:Perilaku metode transform() berdasarkan rotate(),scale(),translate() atau transformasi lain yang selesai melalui transform(). Contohnya: jika Anda sudah menyetel pengerasan gambar menjadi 2 kali, metode transform() akan memperbesar gambar 2 kali, sehingga gambar Anda akhirnya akan berbesar 4 kali.
Petunjuk:Lihat setTransform() Metode yang tidak akan berperan terhadap transformasi lain.
Contoh
Menggambar sebuah persegi panjang; menambahkan matriks transformasi baru melalui transform(), gambar kembali persegi panjang; menambahkan matriks transformasi baru dan gambar kembali persegi panjang. Perhatikan bahwa setiap kali Anda memanggil transform(), ia akan membangun 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);
Sintaks
context.transform(a,b,c,d,e,f);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| a | Gambaran skala horizontal |
| b | Gambaran skala horizontal |
| c | Gambaran skala vertikal |
| d | Gambaran skala vertikal |
| e | Gambaran gerakan horizontal |
| f | Gambaran gerakan vertikal |
Dukungan browser
Angka di tabel menunjukkan versi browser pertama yang 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>.
