Metode HTML canvas setTransform()
Definisi dan Penggunaan
Setiap objek di atas kanvas memiliki matriks transformasi saat ini.
setTransform() metode menetapkan ulang matriks transformasi saat ini menjadi matriks satuan, kemudian menjalankan dengan parameter yang sama transform().
Artinya, setTransform() memungkinkan Anda menggandakan, memutar, memindahkan, dan menyempit lingkungan saat ini.
Keterangan:Transformasi ini hanya mempengaruhi perecapan yang dijalankan setelah pemanggilan setTransform().
Contoh
Menggambar sebuah persegi panjang, melalui setTransform() untuk menetapkan ulang dan membuat matriks transformasi baru, kemudian gambar lagi persegi panjang, menetapkan ulang dan membuat matriks transformasi baru, lalu gambar lagi persegi panjang. Harap dicatat, setiap kali Anda memanggil setTransform(), ia akan menetapkan ulang matriks transformasi sebelumnya dan membangun matriks baru, sehingga di contoh di bawah ini, persegi panjang merah tidak akan ditampilkan, karena ia berada di bawah persegi panjang biru:
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);
Sintaks
context.setTransform(a,b,c,d,e,f);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| a | Rotasi gambaran horizontal |
| b | Gambaran skala horizontal |
| c | Gambaran skala vertikal |
| d | Perbesaran gambaran 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>.
